父元素position:absolute/relative的区别

最新推荐文章于 2024-07-23 22:34:05 发布

zcy_csdn123

最新推荐文章于 2024-07-23 22:34:05 发布

阅读量3.9k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/zcy_csdn123/article/details/77186227

版权

css 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

最近在写div水平垂直居中的时候发现一个问题：就是在父级是absolute的情况下也可以实现。于是就想搞清楚父级position的relative和absolute的区别。

先看一下position这个属性，它有四个值：
static:会忽略所有top left right bottom的设置，但margin和padding是好使的
fixed:相对于浏览器窗口定位，不会受滚动条的影响。
relative:理解为相对自己原来所处的位置移动。
absolute:可定位于相对于包含它的元素的指定坐标。

注意：absolute说的是相对于包含它的元素，而且W3C之前解释是：相对于除static意外的第一个父元素，所以并没有说父元素一定要是position：relative的，但是最好是relative.

下面我自己自己特意试验了一下父元素absolute与relative的区别

<head>
    <meta charset="UTF-8">
    <title>position:absolute/relative</title>
    <style>
        #div1{
            width:500px;  
            height:500px;  
            background-color: red;
            position:relative;
            top:300px;
            left:300px;
        }
        #div2{
            width:300px;
            height:300px;
            background-color: yellow;
            position:absolute;
            top:100px;
            left:100px;
        }
        #div3{
            width:100px;
            height:100px;
            background-color: green;
            position:absolute;
            top:100px;
            left:100px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</body>