【CSS学习笔记】绝对定位的父类参照物的肯定

今天看CSS定位的课程，了解到一个元素要设置绝对定位，须要肯定一个父类或者祖先类参照物，默认是根元素html。
这个默认根元素已经明确，可是祖先类元素参照物如何肯定呢？

Just Try

首先，给出代码：

html部分

<p>let&apos;s begin.</p>
<div id="one">one
    <div id="two">two
        <div id="three">three
            <div id="four">four</div>
            <div id="five">five</div>
        </div>
    </div>
</div>
<p>hello world&excl;</p>

css部分

#one {
    background-color: lime;
    outline: 2px dashed silver;
    width: 50%;
}
#two {
    background-color: yellow;
    outline: 2px dashed gray;
    width: 50%;
    height: 75%;
}
#three {
    background-color: orange;
    outline: 2px dashed blue;
    width: 50%;
    height: 75%;
}
#four {
    background-color: olive;
    outline: 2px dashed;
    width: 50%;
    height: 75%;
}
#five {
    background-color: lightblue;
    outline: 2px dashed red;
    width: 50%;
    height: 75%;
}

显示以下：

第一步，给标记为four的div设置绝对定位

#four {
    background-color: olive;
    outline: 2px dashed;
    width: 50%;
    height: 75%;
    position: absolute;
    right: 5%;
    top: 5%;
}

小结：能够看到four（后面直接将标记的id名称对应div元素）已经脱离原有的文档流，在他的父类元素three中不占用位置了。而它的参考物彷佛就是浏览器视窗自己，也就是html的html元素这个默认的根元素，你看，它离浏览器视窗顶部和右部的距离是否是差很少都是视窗高度的5%，并且它自身的宽度、高度不也是分别为浏览器视窗的宽高的对应50%和75%么。

第二步，给one添加position: relative;属性声明

小结：此次four被限制到one的边框内了，并且宽高和top、right都自适应到了以one的尺寸为基准大小。因此说这个时候，one成了four绝对定位时的祖先元素参照物。

第三步，在第二步的基础上给two添加position: relative;属性声明

小结：唉，此次four却被two“擒获”了唉，怎么回事？没错，four作绝对定位的祖先参照物，是设置了相对定位且离four最近的那个祖先类元素。跟four最有“血缘关系”，four就会被这个最近的祖先类元素“捕获”。搂到怀里唉，掩面&羞涩。

第四步，测试一下第三步的结论，再给three添加position: relative;属性声明

小结：瞧！是否是？three是four的直接父元素，在one和two都已经设置position: relative;属性声明的前提下，three仍是把four给捕获了。

可是！前面几部都是常规套路，若是“不走寻常路”（广告位招租）呢？

第五步，在第四步的基础上，将four的css规则中right的属性值改成负值呢？会有什么效果？

此时，four已经“一只脚跨出”了three的“势力范围”。
css代码以下

#four {
    background-color: olive;
    outline: 2px dashed;
    width: 50%;
    height: 75%;
    position: absolute;
    right: -25%;
    top: 5%;
}

小结：一个元素A要设置绝对定位，离它最近的、设置了相对定位的祖先类元素B，就会“捕获”它。可是最终，做为后代元素的A也只是以B为参照物，也就是从B的位置“出发”，至于能去到哪里，则是由top/right/bottom/left属性来决定了。

---

看完之后学到了啥

哦，彷佛只是知道了一个元素要设置绝对定位必须首先肯定离它最近的、设置了相对定位的祖先元素做为参照物，而后就能够“背上行囊来一次说走就走的旅行了”（扇脸），应该是能够进行相对于参照物的位移了。

唠叨

至于为什么要用先后的两个p元素和five，他们也都是做为咱们实验的对照组啊。这里只用了对W3C标准支持得好的chrome内核的，360极速进行测试，其余浏览器下是什么测试状况有待考察。
此文本是，我的学习实践结果，做为学习笔记加深印象。其余初学者也许亦有些微帮助。
至此。

---

软件与环境

1. Windows 7 ultimate 64bit；

2. sublime text 3 + liveStyle；

3. 360 chrome（内核版本45.0.2454.101），应该不是不很旧吧。