CSS postion中z-index负值的应用

最新推荐文章于 2022-05-12 13:45:29 发布

原创最新推荐文章于 2022-05-12 13:45:29 发布 · 6.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #position #z-index #负数

css 同时被 2 个专栏收录

7 篇文章

订阅专栏

position

1 篇文章

订阅专栏

本文介绍了如何使用CSS的position和z-index属性来精确控制网页元素的显示层级。通过设置父元素的position属性及z-index值，可以实现子元素置于父元素之后的效果。特别地，文章解释了当子元素的z-index设为负值时，在不同情况下子元素的可见性变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当父元素设置了position属性并且设置了背景颜色，子元素设置了position:absolute和z-index:-1，子元素将会在父元素的层级背后不可见。

<style>
/*父元素无z-index值，子元素z-index设为负值将不可见*/
.box { position:relative; top:0; left:0; width:100px; height:100px; background-color:#666;}
.box .sub {position:absolute; z-index:-1; width:10px; height:10px; top:0; left:0; background-color:#fff;}
</style>

<div class="box">
  <div class="sub"></div>
</div>

这里写图片描述

如果在父元素样式里加上z-index值，子元素的z-index的负数值将会失效，状态变为可见。

<style>
/*父元素有z-index值，子元素z-index设为负值将可见*/
.box { position:relative; top:0; left:0; z-index:1; width:100px; height:100px; background-color:#666;}
.box .sub {position:absolute; z-index:-1; width:10px; height:10px; top:0; left:0; background-color:#fff;}
</style>
<div class="box">
  <div class="sub"></div>
</div>