绝对定位内部相对定位？

Question

根据W3Schools (positioning.asp)：

相对定位的元素通常用作绝对定位元素的容器块。

为什么会这样呢？有很好的例子吗？

Answer 1

一个很好的例子是，当您想要将某个东西定位到页面或容器/div的“相对”位置时。

这是我的Fiddle http://jsfiddle.net/doitlikejustin/RdWQ7/2/

这表明，如果绝对div不在“相对”div的内部，则内容将与文档体对齐。

注意绿色div (#box1)，它有position: relative，div在(#inner1)里面对齐，它在#box1的顶部/右边对齐。

蓝色框(#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;
}

这是克里斯·科伊尔的一篇很好的文章..。

具有相对位置的页面元素使您可以控制子元素在其中的绝对位置。

来源：http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 2

其他答案没有明确指出的是：

绝对定位是在没有静态定位的最近祖先中测量出来的。给予祖先相对位置只是达到这一目的的一种手段。它不一定是相对的，它不可能是静态的。

具有绝对位置的元素

顶部:10 top；

距离最近的祖先的顶部有10个像素，其位置不是静态的。

Answer 3

如果一个绝对定位元素不在一个相对元素中，那么当您设置一个值的顶部、左、右或bot时，它将通过该值将绝对位置元素从主体中移出。这是什么意思？例如，如果将绝对位置元素的属性top设置为10‘s，它将将元素10像素从屏幕顶部推送。

如果一个绝对位置元素位于一个相对元素中，那么当您用一个值设置顶部、左侧、右侧或bot时，它将根据该值将绝对位置元素从该相对元素中移出。这是什么意思？例如，如果将绝对位置元素的属性top设置为10‘s，它将将元素从相对元素的顶部推到10像素。在那里，您可以移动相对元素，并且它内部的绝对定位元素总是从相对元素的顶部移动10个像素。