css网页布局技术分析 |css让div在最上层

.box {
display: flex;
flex-wrap: wrap;
}
.box .item {
width: 25%;
}

1. Flex布局

Flex布局是CSS3中新增的一种布局方式，它可以使元素在不同的屏幕尺寸下自适应地排列布局。

上面的代码就是一个应用了Flex布局的例子，大家首先设定.box为flex容器，然后设置flex-wrap属性为wrap，这样所有的.item元素都可以按照一定的规则自适应地排列。

.parent {
display: table;
}
.child {
display: table-cell;
}

2. 表格布局

表格布局是CSS最早的一种布局方式之一，用于实现像表格一样的排列布局。它的兼容性较好，但灵活性比较差。

上面的代码就是一个应用了表格布局的例子，大家将父元素设置为table，子元素设置为table-cell，这样所有的子元素都会以表格的形式排列布局。

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

3. 定位布局

定位布局是CSS中另一种比较基础的布局方式，它通过定位来指定元素的位置。需要注意的是，应用定位布局时需要手动计算元素的位置，灵活性较高，但具有一定的局限性。

上面的代码就是一个应用了定位布局的例子，大家将父元素设置为relative，然后给子元素设置绝对路径的位置，这样所有的子元素都可以指定位置并且保持相对固定。

以上是几种常用的网页布局技术，不同的布局方式适用于不同的场景。大家需要结合具体的需求进行选择，以达到更好的效果。