Question

在课堂上，我们了解到如果我有两个div：一个包装div（我们称之为div A），它被定义为position: relative;，而另一个div，div B位于div { {1}} A。

现在，div position: absolute;的位置取决于div B的位置。这意味着现在div A的点0,0不是浏览器的点0,0，而是div B的点0,0。所以，如果我要将div A向右移动20个像素，向右移动A 30个像素，则div B将位于浏览器右侧50个像素点0,0;

现在，我的问题是：如果我有3个div，该怎么办？ Div B，其中position: relative; div B，div position: absolute内，另一div（div B）C。现在，div C将如何表现？它的位置0,0是div position: absolute;还是div A？

提前致谢。

代码：

Answer 1

从这个JSFiddle可以看出，“C”div的位置与其父亲“B”相对，

position: absolute;

Answer 2

我没有太多可以添加到这些伟大的答案，但这里有一篇文章，帮助我理解这个概念。 http://alistapart.com/article/css-positioning-101

编辑：

那篇文章涵盖了一个位置绝对的div位于其最近的祖先（父，祖父母等）的内部网格上，它是固定的，相对的或绝对的。如果没有，则它与html文档相关，但请注意它的行为仍然与固定不同。它还涵盖了三种位置类型以及静态位置类型之间的主要差异。

静态 - 这是默认位置，它不会为儿童绝对定位的div创建网格。您无法使用css属性top left right或bottom。

relative - 为后代（儿童，孙子等）绝对定位的div创建一个网格。您可以使用顶部，左侧，右侧和底部，但它们“相对”移动到之前的位置。当使用顶部，左侧，右侧和底部时，其他元素仍然会在之前的位置处移动。

绝对 - 为后代（儿童，孙子等）绝对定位的div创建一个网格。您可以使用顶部，左侧，右侧和底部，但它们相对于最近的祖先（父级，祖父级等）网格移动它。请记住，网格是由固定，绝对和相对元素创建的。使用顶部，左侧，右侧和底部时，元素将脱离文档流。（这意味着其他项目可以通过它。）

已修复 - 为子级绝对定位div创建网格。您可以使用顶部，左侧，右侧和底部，但它们相对于浏览器移动它。使用顶部时，左，右和底部脱离文档流。（这意味着其他项目可以通过它。）

Answer 3

Div B - 任何绝对定位的元素根据它的最接近的位置（绝对，相对或固定）父级定位。

Answer 4

这是个人偏好的问题，但这篇文章对我来说比AListApart更能让我更清楚：http://learnlayout.com/position.html

DIV的CSS定位（相对于绝对值）

4 个答案:

编辑：