相对定位里面的绝对定位？答案

【问题标题】：Absolute positioning inside relative positioning?相对定位里面的绝对定位？
【发布时间】：2013-08-16 23:15:34
【问题描述】：

根据 W3Schools (http://www.w3schools.com/css/css_positioning.asp)：

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

这是为什么？有好的例子吗？

【问题讨论】：

标签： css

【解决方案1】：

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

这是我的小提琴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;
}

这里有一篇来自 Chris Coyier 的好文章...

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

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

【讨论】：

谢谢。但它并没有完全回答这个问题。内部 div 相对于第一个没有默认静态定位的父 div 定位。因此，如果我们让 box2 具有绝对定位，我们会得到与相对定位相同的结果。这就引出了一个问题，有什么比将父 div 设为相对如此特别？谢谢
@MoreThanFive 你可以这样做，但现在你的#box2 div 将在身体内部移动，就好像它现在是#inner2。这是一个示例 jsfiddle.net/doitlikejustin/RdWQ7/3 我添加了 right 以便您了解它们的不同之处。

【解决方案2】：

其他答案没有明确说明的是：

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

具有绝对位置和的元素

顶部：10px;

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

【讨论】：

笨蛋，谢谢，这就是我想知道的。

【解决方案3】：

如果绝对定位元素不在相对元素中，那么当您使用值设置 top、left、right 或 bot 时，它会将绝对位置元素从 body 移动该值。这是什么意思？例如，如果您将绝对位置元素的属性 top 设置为 10px，它会将元素从屏幕顶部推 10 个像素。

如果绝对位置元素在相对元素中，那么当您使用值设置 top、left、right 或 bot 时，它会将绝对位置元素从该相对元素移动该值。这是什么意思？例如，如果您将绝对位置元素的属性 top 设置为 10px，它将将该元素从相对元素的顶部推 10 个像素。在那里您可以移动相对元素，其中绝对定位的元素将始终距离相对元素的顶部 10 个像素。

【讨论】：