DIV的CSS定位（相对定位内的绝对定位）

Question

在课堂上我们学习了一个概念：如果现在我有两个div元素，一个包含整个页面（我们称其为div A）并定义了position:relative;，另一个div元素B在div A内部且定义了position:absolute;。那么现在div B的位置将依赖于div A的位置。也就是说，div B的0,0点不再是浏览器的0,0点，而是div A的0,0点。所以，如果我让div A向右移动20像素，div B向右移动30像素，那么div B将相对于浏览器的0,0点向右移动50像素。

现在我的问题是：如果我有三个div元素，div A定义了position:relative;，div A中包含div B且div B定义了position:absolute，而div B中又包含另一个div元素C（div C）并定义了position:absolute;。那么div C会如何表现呢？它的0,0点是div A还是div B呢？

提前感谢您的回答。

代码：

<style type = "text/css">
#a {
position: relative;
left: 20px;
}

#b {
position:absolute;
left: 20px
}

#c {
left: 20px
position:absolute;
}
</style>
<div id = "a">
    <div id = "b">
        <div id = "c">
        test
        </div>
    </div>
</div>

- William Northern

---

可能是 Absolute positioning inside absolute position 的重复问题。 - Sean Ryan

请注意，在您的#c规则中，20px后面缺少了分号，这会导致规则失败。 - fred02138

Answer 1

从这个JSFiddle可以看出，"C" div的位置是相对于其父元素"B"的。

position: absolute;

- ReDEyeS

Answer 2

我没有太多可以补充这两个伟大答案的内容，但是这篇文章帮助我理解了这个概念。http://alistapart.com/article/css-positioning-101

编辑：

该文章介绍了使用绝对定位的div元素会在最近的祖先（父级、祖父级等）中使用固定、相对或绝对定位进行定位。如果没有最近的祖先，则相对于html文档进行定位，但请注意它与fixed位置仍有不同之处。 它还涵盖了三种位置类型以及静态位置类型之间的关键差异。

static - 这是默认位置，它不为子元素创建任何网格的绝对定位div。您不能使用css属性 top left right 或 bottom 。

relative - 为后代（子代，孙代等）绝对定位的div创建网格。您可以使用top、left、right和bottom，但它们是相对于其之前的位置移动的。当使用top、left、right和bottom时，其他元素仍会在其之前的位置上。

absolute - 为后代（子代，孙代等）绝对定位的div创建网格。您可以使用top、left、right和bottom，但它们是相对于最近的祖先（父级、祖父级等）网格移动的。请记住，网格由固定、绝对和相对元素创建。当使用top、left、right和bottom时，元素会脱离文档流。（这意味着其他项目将穿过它。）

fixed - 为子绝对定位的div创建网格。您可以使用top、left、right和bottom，但它们是相对于浏览器移动的。当使用top、left、right和bottom时，元素脱离文档流。（这意味着其他项目将穿过它。）

- John

---

答案应该是自成体系的。至少请考虑如果该链接失效会发生什么。 - Etheryte

Answer 3

B - 任何绝对定位的元素都是相对于其最近的已定位（绝对、相对或固定）的父元素定位。

- Adam

Answer 4

这是个人喜好的问题，但这篇文章比AListApart的那篇更让我明白了一些东西：http://learnlayout.com/position.html

- mercurial

---

答案应该是自包含的。至少请考虑如果该链接不可用会发生什么。 - Etheryte