absolute绝对定位.实现水平垂直居中

最新推荐文章于 2023-04-30 15:50:55 发布

小小怪将军！

最新推荐文章于 2023-04-30 15:50:55 发布

阅读量3.5k

点赞数 1

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/qq_45753147/article/details/123314807

版权

当容器的position属性值为absolute时，这个容器即被绝对定位了。使用绝对定位的容器，会脱离文档流。

当有多个绝对定位容器放在同一个位置时，显示哪个容器的内容呢？类似Photoshop的图层有上下关系，绝对定位的容器也有上下的关系，在同一个位置只会显示最上面的容器。在计算机显示中把垂直于显示屏幕平面的方向称为z方向，CSS绝对定位的容器的z-index属性对应这个方向，z-index属性的值越大，容器越靠上。即同一个位置上的2个绝对定位的容器只会显示z-index属性值较大的。

如果容器设置了绝对定位，但是其父容器没有设置position 属性，绝对定位的容器会一直往上查找，直到找到具有position属性的容器。如果没有设置不到定位的父亲容器，以浏览器窗口为定位参考点


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中</title>
    <style>
       
        .parent{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: pink;
          /*   position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto; */
            /* 方案二 */
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

/* 实现水平垂直居中两种方法
1、子元素绝对定位，父元素相对定位，并且给
子元素设置定位属性全部为0 margin为auto
2、子元素绝对定位，父元素相对定位
并且给子元素设置定位属性
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;*/

小小怪将军！

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
absolute绝对定位.实现水平垂直居中

当容器的position属性值为absolute时，这个容器即被绝对定位了。使用绝对定位的容器，会脱离文档流。当有多个绝对定位容器放在同一个位置时，显示哪个容器的内容呢？类似Photoshop的图层有上下关系，绝对定位的容器也有上下的关系，在同一个位置只会显示最上面的容器。在计算机显示中把垂直于显示屏幕平面的方向称为z方向，CSS绝对定位的容器的z-index属性对应这个方向，z-index属性的值越大，容器越靠上。即同一个位置上的2个绝对定位的容器只会显示z-index属性值较大的。如果容器设置.
复制链接

扫一扫