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 提升文字层级
