论坛 › 马黑黑教程专版 › 深入理解CSS绝对与相对定位

马黑黑 发表于 2022-1-12 09:00

深入理解CSS绝对与相对定位

<style>
.f6 p { text-indent: 2em; margin-bottom: 10px; }
</style>
<div class="f6">
<p>有一种误解认为，position的绝对定位absolute是针对浏览视窗而言的，即当元素的position设定了absolute，那么，元素的left和top若分别设定为0，则元素必定会出现在浏览器视窗区域的左上角。</p>
<p>其实，绝对定位在特定情况下也是相对的。试看如下例子：</p>
<pre>&lt;style type="text/css"&gt;

.爹 {
        width: 400px;
        height: 400px;
        left: 600px;
        border: 1px solid deeppink;
        position: relative;
}

.孩 {
        position: absolute;
        width: 100px;
        height: 100px;
        left: 0;
        top: 0;
        background: royalblue;
}
&lt;/style&gt;

&lt;div class="爹"&gt;
        &lt;div class="孩"&gt;Hello CSS&lt;/div&gt;
&lt;/div&gt;

</pre>
<p>这里，父框“.爹”类选择器定义自己为相对定位，子框“.孩”则定义自己为绝对定位，再看HTML代码div的嵌套结构可知是“爹”嵌套“孩”的布局，叫“爹”的那个div是父div，叫“孩”的那个div是子div。由于相对定位的元素做了绝对定位的元素的爹，绝对定位的孩儿只能限制在爹的势力范围里，更准确地说，孩儿的绝对定位须以也设定了定位的当爹的元素为坐标参照，不论这个爹自身如何定位。所以，上述例子，尽管“孩”选择器定义了绝对定位且xy边界坐标均设定为0，它出现的位置不是在浏览器的阅读区域的左上角，而是在“爹”框的左上角。</p>

<p>如果“爹”选择器没有定位，情形又会如何？</p>
<p>那就先看爹的爹，往上寻祖，一直找到&lt;body&gt;为止。找的过程中，碰上的第一个有血缘关系即嵌套关系的、定义了position的祖先元素，这个“孩”的绝对定位就受它的影响、所做的xy坐标定位以它和自身为参照，如果都没找到，恭喜孩儿，它自由了，可以以自己的xy定位坐标值任意在浏览器阅读区域内驰骋。当然，自设为绝对定位的孩儿在受到父辈或先祖们影响的情况下依然可以将自己定位到浏览器视界的任意处，只是left和top值的设定要算上影响者的位置。</p>

<p>而设定为相对定位的元素，不论父元素设定定位与否，它都是相对于父元素而言，所做定位以自身位置和父元素位置为参照。</p>
<p>扩展知识：绝对定位absolute若设定元素完全离开了自己文档流的位置（比如设置了大于自身高宽的top和left值），它原来所处的占位位置被清零，它后面的元素自然而然地占据它的位置，亦即它后面的文档流所描述的元素一块儿流动上来。而相对位置relative全然不同，元素完全离开了自己原文档流的位置后，那个位置还霸占着——它拥有两个户籍，分别在两个城市（或许因为在另一个城市买了房产？）。</p>
<p>思考：固定定位 fixed 会受到父元素的影响吗？</p>
</div>

加林森 发表于 2022-1-12 10:37

这个教程得好好地去研究研究。{:4_190:}

马黑黑 发表于 2022-1-12 10:45

加林森 发表于 2022-1-12 10:37
这个教程得好好地去研究研究。

多重定位的时候，用得着

加林森 发表于 2022-1-12 11:03

马黑黑 发表于 2022-1-12 10:45
多重定位的时候，用得着

就是。很实用的。

红影 发表于 2022-1-12 11:04

这个介绍风趣幽默，父子还有祖辈，相互依存，继承中发展{:4_187:}

马黑黑 发表于 2022-1-12 11:09

红影 发表于 2022-1-12 11:04
这个介绍风趣幽默，父子还有祖辈，相互依存，继承中发展

英文CSS文档里也是用上祖先之类的词语的

马黑黑 发表于 2022-1-12 11:10

加林森 发表于 2022-1-12 11:03
就是。很实用的。

理解后用起来就能得心应手

红影 发表于 2022-1-12 11:10

子框的绝对定位是在父框内的绝对，这种时候和相对定位的区别比较难理解，貌似相对也是以父框为参考的吧。
好像扩展知识里，说的就是两者区别？

马黑黑 发表于 2022-1-12 11:12

红影 发表于 2022-1-12 11:10
子框的绝对定位是在父框内的绝对，这种时候和相对定位的区别比较难理解，貌似相对也是以父框为参考的吧。
...

你看的不够细。帖子里说的清楚的：相对定位总是相对于父框而言的

红影 发表于 2022-1-12 11:12

思考：固定定位 fixed 会受到父元素的影响吗？

回答，应该会，是以父框为参照的固定位置。

加林森 发表于 2022-1-12 11:14

马黑黑 发表于 2022-1-12 11:10
理解后用起来就能得心应手

是的是的

马黑黑 发表于 2022-1-12 11:14

加林森 发表于 2022-1-12 11:14
是的是的

{:4_190:}

马黑黑 发表于 2022-1-12 11:15

红影 发表于 2022-1-12 11:12
思考：固定定位 fixed 会受到父元素的影响吗？

回答，应该会，是以父框为参照的固定位置。

错了。fixed定位不受父框影响。

加林森 发表于 2022-1-12 11:16

马黑黑 发表于 2022-1-12 11:14


谢茶

红影 发表于 2022-1-12 18:45

马黑黑 发表于 2022-1-12 11:09
英文CSS文档里也是用上祖先之类的词语的

嗯嗯，这样更容易理解。但黑黑的讲解比原始的命名更风趣幽默{:4_199:}

红影 发表于 2022-1-12 18:46

马黑黑 发表于 2022-1-12 11:12
你看的不够细。帖子里说的清楚的：相对定位总是相对于父框而言的

但是，看起来绝对定位也是被父框限制的啊。

红影 发表于 2022-1-12 18:46

马黑黑 发表于 2022-1-12 11:15
错了。fixed定位不受父框影响。

哦，原来这个才是最牛的命令。

马黑黑 发表于 2022-1-12 20:34

红影 发表于 2022-1-12 18:46
但是，看起来绝对定位也是被父框限制的啊。

它就是被限制的。帖子也说明这一点了。

马黑黑 发表于 2022-1-12 20:36

红影 发表于 2022-1-12 18:46
但是，看起来绝对定位也是被父框限制的啊。
是的。只要有先祖设定了定位。如果先祖们都没有，那它是可以按 left 和 top 定位自己与浏览器视界。

马黑黑 发表于 2022-1-12 20:36

红影 发表于 2022-1-12 18:45
嗯嗯，这样更容易理解。但黑黑的讲解比原始的命名更风趣幽默

一样的，名称的翻译风格不同而已

查看完整版本: 深入理解CSS绝对与相对定位