css盒子与盒子层级 |css tt浏览器不兼容

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid red;
margin: 10px;
}

盒子层级是指在文档流中，盒子的层次顺序。通过z-index属性可以设置盒子的层级。层级越高的盒子会显示在其他盒子之上。

.box1 {
position: relative;
z-index: 1;
}
.box2 {
position: absolute;
z-index: 2;
}

通过设置不同的position属性值，可以改变盒子的默认布局方式。其中，static表示元素在文档流中正常布局，relative表示定位相对于自身的位置，absolute表示定位相对于父元素的位置，fixed表示定位相对于浏览器视窗。

.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

当多个盒子重叠在一起时，可以使用z-index属性控制盒子的层级顺序。值越大的盒子会显示在最上面。

总之，CSS盒子模型和盒子层级是CSS布局中不可或缺的基础。熟练掌握它们的使用，可以让大家更好地掌控页面布局和层级关系。