css中的子元素设置绝对定位问题

css中的子元素设置绝对定位问题

在css的中进行定位的时候，为了在进行定位的的过程中，不发生定位混乱的问题，绝对定位（absolute）元素的父级元素应当进行定位，一般设置为relative。简称为“子绝父相”。但由于某些视频课程上讲过“绝对定位元素的爹都是相对定位”，造成了多数人的思维定势，这个并不是一定的，在此纠正。

在绝对定位过程中，绝对定位（Absolute positioning）元素定位的参照物是其包含块（containing block），即相对于其包含块进行定位，不一定是其父元素。但是只要父级元素设了position（ absolute / relative / fixed ），并不是static（默认即是static），那么设定了absolute的子元素即以此为包含块（最近的）。

笔者在知乎中的一篇回答中，看到这样的解释：一个元素的 containing block 是由其最近的 position 为 absolute / relative / fixed 的祖先元素决定的。如果没有找到，则为 initial containing block。需要注意 initial containing block 并不是所谓的以 或是 定位的，而是以整个 canvas (渲染内容的空间）的坐标原点（左上）为基准，以 viewport (也就是浏览器视窗内渲染 HTML 的空间)为大小的矩形。

演示如下：

html代码中申明三个div，现在a3需要进行绝对定位，设置离top和left个10px

    <div class="a1">
        <div class="a2">
            <div class="a3"></div>
        </div>
    </div>

a3css代码如下：

.a3{
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: red;
        top: 10px;
        left: 10px;
    }

（一.）假设a3的直接父级元素a2进行了position设置，则a3参考位置为a2,代码及效果演示如下：

.a1{
            /*position: relative;*/
            border:1px solid #000;
            width: 100px;
            height: 100px;
    }
.a2{
            position: relative;
            border:1px solid #2f2f2f;
            width: 80px;
            height: 80px;
            margin-top: 20px;
            margin-left: 20px;
    }

（二.）若a3元素并未进行position设置，则a3在进行绝对定位时，寻找最近的containing block进行定位：

.a1{
            position: relative;
            border:1px solid #000;
            width: 100px;
            height: 100px;
        }
.a2{
            /*position: relative;*/
            border:1px solid #2f2f2f;
            width: 80px;
            height: 80px;
            margin-top: 20px;
            margin-left: 20px;
        }

结果显示如下：

（注.）若a1和a2均未进行position设置的时候，此时并不是以body为基准进行定位的，而是以整个 canvas (渲染内容的空间）的坐标原点（左上）为基准，以 viewport (也就是浏览器视窗内渲染 HTML 的空间)为大小的矩形。只是大多数的时候body并未进行过多的基础设置，此时body的同样是以该基准点开始布局内容，因此在进行绝对定位的时候，看起来就像是以根节点body来进行定位的，此处同样需要纠正。