css-绝对定位

最新推荐文章于 2023-07-18 18:18:06 发布

smile_spart

最新推荐文章于 2023-07-18 18:18:06 发布

阅读量256

点赞数 1

分类专栏： css 文章标签：绝对定位 absolute absolute居中

本文链接：https://blog.csdn.net/smile_spart/article/details/78610887

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

绝对定位的概念：

生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。

position:absolute

1.对绝对定位的理解：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin:0;
            padding:0;
        }
        .test{
            width:100px;
            height:100px;
            background: pink;
            position:absolute;
            left:20px;
            top:50px;
            margin-left:-50px; /*该div在前面left,top的基础上再上下左右移动(可正可负)*/
            margin-top:-50px;
        }

        .test1{
            position:absolute;
        }
    </style>
</head>
<body>
    <div class="test">
        带有绝对定位的div元素块(position:absolute)
    </div>
    <p class="test1">测试1</p>
    <p class="test2">测试2</p>
</body>
</html>

2.div水平垂直居中：

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin:0;
            padding:0;
        }
        .test{
            width:120px;
            height:120px;
            background: pink;
            position:absolute;
            /*div水平垂直居中*/
            margin:auto;
            left:0;
            right:0;
            top:0;
            bottom:0;
        }
    </style>
</head>
<body>
    <div class="test">
        带有绝对定位的div元素块(position:absolute)
    </div>
    <p class="test1">测试1</p>
    <p class="test2">测试2</p>
</body>
</html>

解释：利用绝对定位可以将要居中的元素脱离文档流

margin：auto 默认只会计算左右边距。而上下如果设置为auto时默认是取0.也就是说，margin：auto和margin：0 auto 在一般情况下没有区别，不能实现垂直居中。

方法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin:0;
            padding:0;
        }
        .test{
            width:100px;
            height:100px;
            background: pink;
            border:5px solid black;
            position:absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
            -webkit-transform:translate(-50%,-50%);
            -moz-transform:translate(-50%,-50%);
            -ms-transform:translate(-50%,-50%);
            -o-transform:translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="test">
        带有绝对定位的div元素块(position:absolute)
    </div>
    <p class="test1">测试1</p>
    <p class="test2">测试2</p>
</body>
</html>

解释：

该方式是利用CSS3 属性的垂直水平居中方法；

translate 函数当中使用百分比是以该元素的内容区、补白(padding)、边框(border)为标准计算的；

smile_spart

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css-绝对定位

绝对定位的概念：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。position:absolute1.对绝对定位的理解： *{ margin:0; padding:0; } .test{ width:
复制链接

扫一扫