[分享]css中定位的绝对定位

CSS中的定位方式有三种，分别是相对定位、绝对定位和固定定位。其中，绝对定位最为常用。它可以让元素相对于其父元素的位置进行定位，这对于实现类似于弹出层、悬浮框等效果非常有用。.box { : rela...

CSS中的定位方式有三种，分别是相对定位、绝对定位和固定定位。其中，绝对定位最为常用。它可以让元素相对于其父元素的位置进行定位，这对于实现类似于弹出层、悬浮框等效果非常有用。

.box {
    position: relative;
}

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

在上面的代码中，我们首先将父元素（即.box）设为相对定位，然后将子元素（即.popup）设为绝对定位。在子元素的样式中，我们通过top和left来指定其距离其父元素上方和左侧的距离，同时使用transform属性让其在垂直和水平方向上居中。

需要注意的是，在使用绝对定位时，元素的位置根据父元素进行计算。如果父元素没有设置position属性，则元素的位置将根据文档的body元素进行计算。

使用绝对定位，我们还可以通过z-index属性来控制元素的图层顺序。z-index属性的值越大，元素越靠前，默认情况下所有元素的z-index均为auto。

.top {
    position: absolute;
    z-index: 1;
}

.bottom {
    position: absolute;
    z-index: 0;
} 

在上面的代码中，我们将.top元素的z-index设为1，将.bottom元素的z-index设为0，从而使.top元素在前面，遮挡了.bottom元素。

综上所述，使用绝对定位可以让我们轻松实现许多常见的布局效果，同时也可以通过z-index属性控制元素的图层顺序。