[快速入门前端 30] z-index 和定位的特殊用法

z-index 是什么

在一般 normal flow (布局流) 中，元素几乎都会按照顺序依依排列，但元素经过定位后有可能会发生重叠，这时候就需要靠 z-index 来控制重叠的先后顺序了。
在 CSS 中，z-index 可以用来决定元素在 z 方向的位置，也就是元素覆盖的顺序，z-index 值越大的元素在越上方，越小的越下方，且 z-index 值可以为负数。

z-index 的特点：

可以为负，值越大的在越上方只作用于定位后的元素子元素的重叠顺序可能受到父元素 z-index 值的影响

範例：

z-index 值越大的在越上方
儘管蓝色正方形 z-index 值比红色大，但因受到父元素 z-index 值的影响，会被红色正方形覆盖

定位的特殊用法

用绝对定位让元素置中

在之前说到 margin 的部分时，可以使用 margin: 0 auto 让元素水平置中，而绝对定位不仅可以让元素水平置中，同时也能达到垂直置中的效果。
用法：

将子元素设定为 top: 0;、bottom: 0;、left: 0;、right: 0;、margin: auto;，缺一不可子元素会寻找最近一个具有定位的祖先元素进行置中

範例：

父元素未定位，子元素以根元素作为参考点进行置中

父元素为相对定位，子元素以父元素为参考点置中

让定位后的元素填满父元素

元素在经过绝对定位和固定定位定位后预设会改由内容撑开宽高，若想让元素填满父元素的话只能设定 width: 100% 或 height: 100% 指定元素填满父元素。但由于 width 和 height 指定的是元素 content 区域 (内容区) 的宽高，若该元素还有 padding 或 border 时，直接指定为 100% 会让子元素超出父元素的範围，这时候就可以同时设定 left、right 让元素填满父元素。

用法：

将子元素设定为 left: 0; 、right: 0; 可使子元素填满父元素的宽度top: 0;、bottom: 0; 同理可填满高度对未指定宽高的定位元素同时设定上下或左右可使该元素填满父元素，上下左右值可不为 0，会产生类似父元素 padding 的效果

範例：

让子元素填满父元素宽度
使用上下左右四个属性让呈现类似 padding 的效果

---

上一篇：[快速入门前端 29] Position 定位：绝对定位、相对定位、固定定位、黏性定位
下一篇：[快速入门前端 31] 进阶样式属性 (1)：Shadow 阴影和 Opacity 不透明度
系列文章列表：[快速入门前端] 系列文章索引列表