父元素position:absolute/relative的区别

最近在写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/relativetitle>
    <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>

div1的position:relative的情况
父元素position:absolute/relative的区别_第1张图片

注意此时的body高为500px 因为div1高为500px,我只设置了div1的top:300px;left:300px;而right和bottom也自动变为了300px

div1的position:absolute的情况
父元素position:absolute/relative的区别_第2张图片

body的高度没有了,并且div1的righth和bottom 变为了542px和160px 它们正是div1距浏览器窗口right和bottom的距离。

absolute的情况看起来像浮动了,body没有被撑起来这不是我们想看到的情况,所以一般父元素的position:relative 会相对较好一点。

前端小白,哪里不正确请批评指出。

你可能感兴趣的:(css)