9

在课堂上我们了解到，如果我有两个 div：一个包装器 div（我们称之为 div A），它被定义为position: relative;另一个 div，divB位于 div 内部A，带有position: absolute;.

将会发生的是，现在 divB的位置取决于div 的位置A。这意味着现在 div 的 0,0B点不是浏览器的 0,0 点，而是 div 的点A。因此，如果我将 div向右移动A20 像素，将 div 向右移动B30 像素，则 divB将在浏览器点 0,0 右侧 50 像素；

现在，我的问题是：如果我有 3 个 div 怎么办。div A that's position: relative;，其中 div Bthat's position: absolute，在 divB中，另一个 div (div C) with position: absolute;。现在， div C 将如何表现？它的位置 0,0 是 divA还是 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>
4

4 回答 4

16

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

position: absolute;
于 2013-09-21T12:17:27.863 回答
8

对于这两个很好的答案，我没有太多要补充的，但这里有一篇文章帮助我理解了这个概念。http://alistapart.com/article/css-positioning-101

编辑：

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

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

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

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

固定- 为子绝对定位的 div 创建一个网格。您可以使用顶部、左侧、右侧和底部，但它们会相对于浏览器移动它。当使用 top、left、right 和 bottom 时会超出文档的流程。（这意味着其他项目通过它。）

于 2013-09-21T21:07:16.937 回答
6

Div B - 任何绝对定位的元素都根据其最近的定位（绝对、相对或固定） parent进行定位。

于 2013-09-21T12:11:45.690 回答
1

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

于 2014-02-12T21:56:02.787 回答