医药公司网站建设,网站制作中山,google推广有效果吗,昆明软件开发培训目录#xff1a;1.static2.relative3.absolute4.fixed5.实验#xff1a;static, relative, absolute中#xff0c;父元素-子元素高度关系6.z-index7.参考资料1.static默认的定位方式#xff0c;不支持设置位移属性用来覆盖之前创建的 absolute, relative, fixed 2.relative… 目录 1.static 2.relative 3.absolute 4.fixed 5.实验static, relative, absolute中父元素-子元素高度关系 6.z-index 7.参考资料 1.static 默认的定位方式不支持设置位移属性用来覆盖之前创建的 absolute, relative, fixed 2.relative “relative”可以给元素设置位移offset“top、right、bottom和left”属性。通过这些位移属性设置可以给元素进行精确的定位。 relative 位移属性 仍∈文档流仍占用原默认位置周边元素也能看到其默认位置相对定位元素的位移是相对于元素自身的边缘。 应用场景给其嵌套标签设定一个新的参照点创建新的定位环境。 事实上一个相对定位元素同时设置了“top”和“bottom”位移属性值实际上“top”优先级高于“bottom”。然而一个相对定位元素同时设置了“left”和“right”位移属性他们的优先级取决于页面使用的是哪种语言例如如果你的页面是英文页面那么“left”位移属性优先级高如果你的页面是阿拉伯语那么“right”的位移属性优先级高。 3.absolute 绝对定位元素 脱离文档流相对于最近的定位祖先/浏览器窗口元素。简单来说 如果元素有一个祖先祖先的position设为 relative/ absolute/ fixed元素将相对于祖先元素的边定位 若元素没有包含在另一个定位元素中它将相对于初始包含块根html元素定位。 一旦定位一个元素它将变为它包含的所有元素的新包含块。转变元素为包含块的一种方法position: relative; 但不设置偏移值来移动它。也反映出相对定位元素通常用于为绝对定位元素创建“定位环境”。 相对定位的祖先ancestor 绝对定位元素elem 若 elem 没有设置盒子位移属性elem 的顶部、左部会和设置了相对定位的父元素的顶边、左边重合。多个elem会重叠若 elem 设置了盒子位移属性elem 会对于设置了相抵定位的祖先元素边缘进行移位。 当一个绝对定位的元素有固定的高度和宽度并且盒子位移同时设置了“top”和“bottom”时“top”更具优先组另外和相对定位元素一样当同时设置了“left”和“right”时优先级取决于他的页面使用的语言。 当一个绝对定位的元素没有明确指定高度和宽度同时使用盒子位移的“top”和“bottom”属性时会使整个元素的高度跨越整个容器。同样的当这个元素同时使用位移“left”和“right”属性值会使整个元素的宽度跨越整个容器。如果同时使用位移四个属性可以指定一个宽度和高度显示元素。这个时候绝对定位元素的宽度和高度都是100%。 box-1 不指定height, width top: 10px; bottom: 10px; /* 同时使用top, bottom, 高度跨越整个容器 */ left: 10px; right: 10px; /* 同时适应left, right, 宽度跨越整个容器 */ 应用场景适合于简单的实际细节e.g. 日期放在标题右下角图片移除其包装块说明文字放在照片之上。 4.fixed 固定定位元素偏移值总是相对于浏览器窗口即使该元素被放在另一个 relative / absolute 定位的标签里也一样。固定元素总是可见即便内容在滚动。用于创建固定侧边栏或者模仿HTML框架效果。 5.实验static, relative, absolute中父元素-子元素高度关系 static 此例中子元素 box-xx 设置height父元素 box-set 不设置height。 父元素的高度由子元素高度撑起子元素原始高度 子元素 height: 40px; 子元素 height: 80px; 相对定位元素 此例中子元素 box-xx 设置height父元素 box-set 不设置height。 父元素的高度由子元素高度撑起子元素原始高度与位移无关 子元素 height: 40px; 子元素 height: 80px; 绝对定位元素父元素relative子元素absolute 此例中子元素 box-xx 设置height父元素 box-set 也设置了height。 父元素的高度并非由子元素高度撑起absolute 元素脱离了文档流 但二者之间存在联系子元素是相对于父元素的边缘进行位移 父元素 height: 200px; 子元素 height: 80px; 父元素 height: 200px; 子元素 height: 20px; 父元素 height: 100px; 子元素 height: 80px; 父元素 height: 10px; 子元素 height: 80px; 父元素 height: 0; 子元素 height: 80px; 实验源码下载可见我的github 路径baiduProj/task4-center/position/ 6.z-index z-index 表示定位元素在网页上堆叠的顺序。 一般情况定位元素的堆叠顺序是按照其HTML代码顺序进行的。e.g. 两个绝对定位的div第二个div会出现在第一个div的上层。 但可以通过 z-index 来控制定位元素的堆叠顺序。z-index 值越大越处于顶层。 同一个父元素包裹的子元素比较 z-index 才有意义。 不同父元素下的子元素其堆叠顺序遵循父元素的堆叠顺序。定位的父元素parent和子元素a, bparent 的 z-index 值是a, b 的堆叠起点即使 parent(z-index: 1000)a(z-index: 1)b(z-index: 3)a, b的z-index相对 parent 更小, 但仍位于 parent 上层。 7.参考资料 HTML和CSS高级指南之二——定位详解 转载于:https://www.cnblogs.com/xhz-dalalala/p/5492559.html
