z-index为什么没生效（使用position）

Yannnnnm

于 2023-12-01 11:42:30 发布

阅读量184

点赞数 1

分类专栏：开发小程序bug css 文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/Yannnnnm/article/details/134731065

版权

4 篇文章

订阅专栏

1 篇文章

订阅专栏

是不是写样式得时候想要下层被上层盖住得时候总是不生效，这个时候需要知道一个知识点：
z-index属性只对具有定位(position不为static)的元素有效。如果上面的盒子和下面的盒子都没有定位，则无法使用z-index属性实现盖住效果。

.upper-box {
  position: relative;
  z-index: 2;
  /* 其他样式 */
}

.lower-box {
  position: relative;
  z-index: 1;
  /* 其他样式 */
}