CSS定位笔记(MDN)
阅读MDN - CSS定位学习笔记
元素没有z-index属性的情况下, 各个元素在z轴从底部到顶部的顺序如下:
- 背景及根元素的border
- 后代没有定位属性的block, 根据其在HTML中的顺序排列
- 后代有定位属性的元素, 根据其在HTML中的顺序排列
各个属性: (均为计算后属性)
static: 默认的定位, 相当于没有定位属性,
top,right,bottom,left,z-index在此情况下均无效.relative: 相对定位属性, 含有该属性的元素, 其top/left/bottom/right的值表明该元素相对正常位置(static情况下的位置)的距离. 根据文档的正常流进行定位, 因此元素会被默认添加space, 不会影响任何其他元素的定位. 如果
z-index的值不是默认值auto, 会创建一个新的堆叠层,relative属性不作用与含有这些属性的元素:table-*-group,table-row,table-column,table-cell,table-captionabsolute: 脱离正常文档流, 不会被默认添加space. 元素相对于其最近的含有定位元素的祖先元素进行定位, 如果没有符合条件的祖先元素, 则相对于其最初的包含块进行定位. 最终的位置由
top,right,bottom,left决定. 如果z-index的值不是默认值auto, 会创建一个新的堆叠层. 这种元素可以有外边距且不和其他外边距重叠.fixed: 脱离正常文档流, 不会被默认添加space. 相对于屏幕视口的位置, 不会随着页面滚动而改变位置. 最终的位置由
top,right,bottom,left决定, 通常会创建一个新的堆叠层. 当祖先元素含有这些属性之一时:transform,perspective,filter, 那么相对位置的对象就不是视口而是这些祖先元素. In printed documents, the element is placed in the same position on every page.?(absolute/fixed: 绝对定位属性, 元素top/left/bottom/right的值表明该元素相对其包含块的距离. 如果元素存在margin外边距, 其相对距离也要相应地变化.)
- sticky: 粘性定位属性, 不脱离正常文档流, 相对于文档流根元素和包含块的位置, 包括表格相关的元素, 相关的距离不会影响任何其他元素的位置. 通常会创建一个新的堆叠层. 根据规范, sticky 属性不作用于含有
overflow: hidden或auto的元素.
大部分情况下, 绝对定位元素height和width值为auto以适应元素内部内容的显示. 不过, non-replaced 绝对定位的元素可以通过声明top和bottom的值, 保存height为默认值auto来补足垂直方向的空间. 水平方向通过改变left和right亦然.
Note:
- 如果
top和bottom均声明了值, 以top为准; - 如果
left和right均声明了值, 在有从左到右（LTR）阅读习惯的国家, 以left为准, 在有从右向左（RTL）阅读习惯的国家, 以right为准.
浮动块的位置处于定位块和非定位块之间:
有浮动块的情况下, 各个元素在z轴从底部到顶部的顺序如下:
- 背景及根元素的border
- 后代没有定位属性的块级元素, 根据其在HTML中的顺序排列
- 浮动块
- 后代有定位属性的元素, 根据其在HTML中的顺序排列
浮动块不会影响没有定位属性的块级元素的层级, 但是会影响元素内部的内容. 因此更加确切的z轴顺序是:
- 背景及根元素的border
- 后代没有定位属性的块级元素, 根据其在HTML中的顺序排列
- 浮动块
- 后代没有定位属性的内联元素
- 后代有定位属性的元素, 根据其在HTML中的顺序排列
本例(点击子标题链接进入MDN文章查看)中, 除了未定位的所有块级元素都是半透明的, 以更好地说明层叠的顺序, 如果未定位块(DIV #4)的不透明值改变, 就会发生奇怪的现象: 背景和该块级元素会变成在浮动块和定位块的上层. 这是因为规范比较奇特: 给元素添加opacity值会创建一个新的堆叠层, 详见What No One Told You About Z-Index
我们可以在定位元素上添加z-index属性, 属性值可以是正整数, 零或负整数, 表明了元素在z轴上的层级.
z-index属性没有声明值时, 默认该元素在0层.
如果多个元素的z-index值相同, 元素堆叠层级规则遵循没有z-index属性的元素堆叠层级规则