服务时间:8:30-18:00

首页 >web前端网

css层级关系怎么设置

发布时间:2022-12-08 23:09 字数:616字 阅读:134

css层级关系怎么设置?绝对定位和相对定位都可以提升元素的层级。元素发生堆叠时,按照普通文档流中的规律,后面的元素显示在前面的元素上面。在定位中,层级高的元素显示在层级低的元素上面,元素的层级默认为1。

元素的层级通过z-index属性设置。拥有更高层级的元素总是会处于层级低的元素上面。

【例1】创建一个类名为box的div框,设置相对定位。div中有一段文字和一张图片,均为绝对定位。代码如下。

<style>
   body{
      margin:0;
      padding:0;
   }
   .box{
      width:200px;
      height:300px;
      border:2px solid #c0bcbb;
      font-size:30px;
   }
   img{
      height:300px;
      position:absolute;
   }
   p{
      position:absolute;
   }
</style>
<body>
    <div class="box">
      <p> 秋天的原野 </p>
      <img src="/news/img/tree.jpg" alt="" />
    </div>
</body>

没有设置层级时,后面的元素显示在前面的元素上面,即图片覆盖文字,如图1所示。

 图片覆盖

图1 图片覆盖

文字在结构不变化的情况下,想要达到文字在图片上方的效果,只需要给文字设置CSS样式z-index:2即可,如图2所示。CSS代码如下。

p{
   position:absolute;
   z-index:2;
}

提升文字层级

图2 提升文字层级