Html DIV 的 CSS 定位（绝对内相对）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18932241/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS positioning of DIVs (absolute within relative)
提问by William Northern
In class we learned that if I have two divs: a wrapper div (let's call it div A) that's defined as position: relative;and another div, div Bthat's inside div Awith position: absolute;.
在课堂上我们了解到，如果我有两个 div：一个A定义为的包装 div（让我们称之为 div ），position: relative;另一个 div，divB位于 div 内部，A带有position: absolute;.
What will happen is that now the position of div Bis dependent on the position of div A. Meaning that now the point 0,0 of div Bis not the point 0,0 of the browser, but of div A. So, if I was to move div Asay 20 pixels to the right, and div B30 pixels to the right, div Bwould be 50 pixels to the right of the browser's point 0,0;
将会发生的是，现在 divB的位置取决于div的位置A。这意味着现在 divB的 0,0 点不是浏览器的 0,0 点，而是 div 的点A。因此，如果我将 divA向右移动20 个像素，将 div向右移动B30 个像素，则 divB将位于浏览器点 0,0 右侧 50 个像素处；
Now, my question is: what if I have 3 divs. Div A that's position: relative;, within it div Bthat's position: absolute, and within div B, another div (div C) with position: absolute;. Now, how will div C behave? Will its position 0,0 be that of div Aor div B?
现在，我的问题是：如果我有 3 个 div 呢？Div A that's position: relative;，在它的 div Bthat's 中position: absolute，在 div 中B，另一个 div (div C) 与position: absolute;. 现在，div C 将如何表现？它的位置 0,0 是 divA还是 div B？
Thanks in advance.
提前致谢。
code:
代码：
<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>
回答by ReDEyeS
回答by John
I don't have much to add to both these great answers, but here's an article that helped me understand the concept. http://alistapart.com/article/css-positioning-101
对于这两个很棒的答案，我没有什么要补充的，但是这里有一篇文章帮助我理解了这个概念。http://alistapart.com/article/css-positioning-101
EDIT:
编辑：
That article covers that a div with position absolute is positioned on the inner grid of its closest ancestor(parent, grandparent, etc.) that is fixed, relative, or absolute. If there is none it is relative to the html document, but note it still behaves differently than fixed. It also covers the key differences between the three position types as well as the static position type.
那篇文章介绍了具有绝对位置的 div 位于其最近的祖先（父、祖父等）的内部网格上，该网格是固定的、相对的或绝对的。如果没有，它是相对于 html 文档的，但请注意，它的行为仍然与固定不同。它还涵盖了三种仓位类型以及静态仓位类型之间的主要区别。
static- this is the default position it creates no grids for children absolute positioned divs. You can't use the css properties topleftrightor bottom.
静态- 这是默认位置，它不会为子绝对定位的 div 创建网格。您不能使用 css 属性topleftright或bottom.
relative- creates a grid for descendent(children, grandchildren, etc.) absolute positioned divs. You can use top, left, right and bottom, but they move it 'relative' to where it was previously at. When using top, left, right, and bottom other elements still go around where it was previously at.
相对- 为后代（孩子、孙子等）绝对定位的 div 创建一个网格。您可以使用顶部、左侧、右侧和底部，但它们会将其“相对”移动到之前的位置。使用顶部、左侧、右侧和底部时，其他元素仍会在之前所在的位置移动。
absolute- creates a grid for descendent(children, grandchildren, etc.) absolute positioned divs. You can use top, left, right and bottom, but they move it relative to the closest ancestor(parent, grandparent, etc.) grid. Remember the grids are created by fixed, absolute, and relative elements. When using top, left, right, and bottom the element goes out of the flow of the document. (this means other items go through it.)
绝对- 为后代（孩子、孙子等）绝对定位的 div 创建一个网格。您可以使用顶部、左侧、右侧和底部，但它们会相对于最近的祖先（父母、祖父母等）网格移动它。请记住，网格是由固定、绝对和相对元素创建的。当使用 top、left、right 和 bottom 时，元素会脱离文档流。（这意味着其他项目会通过它。）
fixed- creates a grid for children absolute positioned divs. You can use top, left, right and bottom but they move it relative to the browser. When using top, left, right and bottom goes out of the flow of the document. (this means other items go through it.)
固定- 为儿童绝对定位的 div 创建一个网格。您可以使用顶部、左侧、右侧和底部，但它们会相对于浏览器移动它。使用 top、left、right 和 bottom 时会脱离文档流。（这意味着其他项目会通过它。）
回答by Adam
Div B - any absolutely positioned element is positioned according to it's closest positioned (absolute, relative, or fixed) parent.
Div B - 任何绝对定位的元素都根据它最近的定位（绝对、相对或固定） parent 进行定位。
回答by mercurial
It's a matter of personal preference, but this article was the one that cleared things up even more for me than the AListApart one: http://learnlayout.com/position.html
这是个人喜好的问题，但这篇文章比 AListApart 对我来说更清楚：http://learnlayout.com/position.html
