z-index需与非static的position配合使用，值越大越靠前，但受层叠上下文限制，父元素的层级可能影响子元素的显示顺序。
在CSS中，z-index 与 position 结合使用可以控制元素在Z轴上的堆叠顺序。也就是说，它决定了哪些元素显示在前面，哪些被压在后面。
position 是前提
z-index 只对已定位的元素生效。所谓“已定位”，是指元素的 position 属性值为以下之一：
relative（相对定位） absolute（绝对定位） fixed（固定定位） sticky（粘性定位）
如果一个元素的 position 是 static（默认值），即使设置了 z-index，也不会起作用。
z-index 控制层叠顺序
z-index 的值越大，元素越靠前。它可以是正数、负数或0。
立即学习“前端免费学习笔记（深入）”；
数值大的元素会覆盖数值小的元素 未设置 z-index 的定位元素，默认值为 auto，行为类似于 z-index: 0 负值的元素会显示在正常文档流元素之下
例如：
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情 .positioned {
position: relative;
z-index: 2;
}
.another {
position: absolute;
z-index: 1;
}
此时 .positioned 元素会显示在 .another 元素之上。
注意层叠上下文（Stacking Context）
z-index 不是全局比较的。当父元素创建了新的层叠上下文，其子元素的 z-index 只在该父容器内部有效。
以下情况会创建新的层叠上下文：
position 为 fixed 或 sticky（通常） z-index 不为 auto 且 position 不为 static opacity 小于 1 transform、filter、will-change 等属性触发
这意味着：一个 z-index: 999 的元素，如果它的父级层叠上下文层级较低，仍可能被 z-index 较小但父级层级更高的元素覆盖。
基本上就这些。掌握 z-index 关键在于理解它依赖 position，且受层叠上下文限制。合理设置 position 并注意父元素影响，才能准确控制页面的视觉层次。
以上就是css定位z-index与position结合使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1004787.html
微信扫一扫 
支付宝扫一扫 
