CSS 中,可以使用 z-index 属性来控制层级关系,这个属性可以让元素覆盖其他元素在我们的页面中,如果想让一个 div 遮住另一个 div,我们可以利用 z-index 属性来实现 .conta
CSS 中,可以使用 z-index 属性来控制层级关系,这个属性可以让元素覆盖其他元素
在我们的页面中,如果想让一个 div 遮住另一个 div,我们可以利用 z-index 属性来实现
.container { position: relative; /*让内部的元素相对于此元素定位*/ } .overlay { position: absolute; /*让元素脱离文档流*/ top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.5); /*添加透明度*/ z-index: 1; /*提高层级*/ } .content { position: relative; /*让内部的元素相对于此元素定位*/ z-index: 2; /*提高层级*/ }
在上面的代码中,我们首先给容器 .container 设置了相对定位,这样内部的元素设置绝对定位时,会相对 .container 进行定位
然后我们给要遮住的 div 设置了绝对定位,使其脱离文档流,让其能够遮盖下面的元素,并且设置了宽高 100% ,保证其能够铺满整个容器
接着,我们通过设置 z-index 属性,将遮盖层的层级提高(一般情况下,层级数值越大的元素就越在上面),让其能够覆盖下面的 div
最后,我们给要展示的 div 也设置了相对定位,并且将其层级也提高,保证其能够放在遮盖层的上面
这样,我们就成功实现了一个 div 遮住另一个 div 的效果
粉丝
0
关注
0
收藏
0