CSS 相对定位里面的绝对定位？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18283417/
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
Absolute positioning inside relative positioning?
提问by More Than Five
According to W3Schools (http://www.w3schools.com/css/css_positioning.asp):
根据 W3Schools ( http://www.w3schools.com/css/css_positioning.asp)：
Relatively positioned elements are often used as container blocks for absolutely positioned elements.
相对定位元素通常用作绝对定位元素的容器块。
Why is this? Is there a good example?
为什么是这样？有很好的例子吗？
回答by doitlikejustin
A good example would be when you want to position something to the page or "relative" to a container/div.
一个很好的例子是，当您想要将某些内容定位到页面或“相对”于容器/div 时。
Here is my Fiddle http://jsfiddle.net/doitlikejustin/RdWQ7/2/
这是我的小提琴http://jsfiddle.net/doitlikejustin/RdWQ7/2/
This shows you that without the absolute div being inside of a "relative" div, the contents are aligned to the document body.
这表明如果绝对 div 不在“相对”div 内，内容将与文档正文对齐。
Notice that the green div (#box1), which has position: relative, the div inside (#inner1) it is aligned top/right INSIDE of #box1.
请注意，绿色 div ( #box1) 具有position: relative，#inner1它内部的 div ( ) 在 的顶部/右侧对齐#box1。
The blue box (#box2), which has the exact same HTML layout as the green box (#box1), does NOT include position: relativeand notice that the div inside it (#inner2) is aligned to the top/right of the body
蓝框 ( #box2) 与绿框 ( #box1)具有完全相同的 HTML 布局，但不包括position: relative并注意到其中的 div ( #inner2) 与body
#box1, #box2 {
width: 100px;
height: 100px;
color: white;
text-align: center;
line-height: 100px;
}
#box1 {
background: green;
position: relative;
}
#box2 {
background: blue;
}
#inner1, #inner2 {
width: 50px;
height: 50px;
top: 0;
right: 0;
position: absolute;
background: black;
opacity: 0.5;
color: white;
text-align: center;
line-height: 50px;
}
Here is a good article about it from Chris Coyier...
这是 Chris Coyier 的一篇关于它的好文章......
A page element with relative positioning gives you the control to absolutely position children elements inside of it.
具有相对定位的页面元素使您可以控制在其中绝对定位子元素。
Source: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
来源：http: //css-tricks.com/absolute-positioning-inside-relative-positioning/
回答by More Than Five
What the other answers don't explicitly state is this:
其他答案没有明确说明的是：
Absolute positioning is measured out in the nearest ancestor that doesn't have static positioning. Giving an ancestor relative positioning is just a means to this end. It doesn't have to be relative, it just can't be static.
绝对定位是在最近的没有静态定位的祖先中测量出来的。给一个祖先相对定位只是达到这个目的的一种手段。它不一定是相对的，只是不能是静态的。
An element with absolute position and
具有绝对位置和
top:10px;
顶部：10px；
will be 10 pixels from the top of the closest ancestor whose position isn't static.
距离最近的祖先的顶部 10 个像素，其位置不是静态的。
回答by A.sharif
If an absolute positioned element isn't in a relative element then when you set top, left, right, or bot with a value, it will move the absolute position element from the body by that value. What does this mean? For example if you set an absolute position element's attribute, top, to 10px, it will push the element 10 pixels from the top of the screen.
如果绝对定位元素不在相对元素中，那么当您为 top、left、right 或 bot 设置一个值时，它会将绝对位置元素从 body 移动该值。这是什么意思？例如，如果您将绝对位置元素的属性 top 设置为 10px，它会将元素从屏幕顶部推开 10 个像素。
If an absolute position element is in a relative element then when you set top, left, right, or bot with a value, it will move the absolute position element from that relative element by that value. What does this mean? For example if you set an absolute position element's attribute, top, to 10px, it will push the element 10 pixels from the top of relative element. There you can move the relative element around and the absolute positioned element inside of it will always be 10 pixels from the top of the relative element.
如果绝对位置元素在相对元素中，那么当您为 top、left、right 或 bot 设置一个值时，它会将绝对位置元素从该相对元素移动该值。这是什么意思？例如，如果您将绝对位置元素的属性 top 设置为 10px，它会将元素从相对元素的顶部推送 10 个像素。在那里你可以移动相对元素，它里面的绝对定位元素将始终距离相对元素顶部 10 像素。
