Question

body {
    margin: 0;
}

.wrap {
    width: 800px;
    height: 1000px;
    position: relative;
    margin: auto;
    background: #e3e3e3;
}

.box {
    width: 400px;
    height: 400px;
    margin: auto;
    background: red;
    position: absolute;
    left: 20px;
    top: 30px;  
}

我有一个小标记和一些我正在学习的CSS，请告诉我为什么.wrap包含.box需要是相对的而另一个是绝对的。 Whycan都是绝对的或相对的。这可能是一个愚蠢的问题，但无论我阅读了多少教程，我都无法解决这个问题。详细的Anwer请。

Answer 1

绝对定位表示该元素完全脱离了页面布局的正常流程。就页面上的其他元素而言，绝对定位的元素根本不存在。然后，元素本身被单独绘制，在其他所有内容的“顶部”，使用left，right，top和bottom属性指定的位置。

使用您使用这些属性指定的位置，然后将元素放置在其最后一个祖先元素中的位置，该元素具有除静态之外的任何位置属性（如果未指定位置属性，则定位元素使用静态），如果不存在这样的祖先，则为文档正文（浏览器视口）。

例如，如果我有这段代码：

<body>
  <div style="position:absolute; left: 20px; top: 20px;"></div>
</body>...then the <div> would be positioned 20 px from the top of the browser viewport, and 20px from the left edge of same.

但是，如果我做了类似的事情：

<div id="outer" style="position:relative">
   <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
 </div>...

然后内部div将从外部div的顶部定位20px，并且距离相同的左边缘20px，因为外部div没有定位位置：static因为我们已明确将其设置为使用位置：相对

另一方面，相对定位就像根本没有定位一样，但是左，右，上，下属性将元素“推”出正常布局。页面上的其他元素仍然可以布局，就像元素处于正常位置一样。

例如，如果我有这段代码：

<span>Span1</span>
<span>Span2</span>
<span>Span3</span>...

然后所有三个元素将彼此相邻而不重叠。

如果我设置第二个使用相对定位，如下所示：

<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>...

然后Span2将与Span1的右侧重叠5px。 Span1和Span3将与第一个示例中的位置完全相同，在Span2的右侧和Span3的左侧之间留下5px的间隙。

希望能澄清一些事情

有关详细信息，请参阅此：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

这也很好： http://sitepoint.refererence.sitepoint.com

Answer 2

<强>位置：相对于

如果指定position：relative，则可以使用top或bottom，left或right来相对于文档中通常出现的位置移动元素。

<强>位置是：绝对

当您指定position：absolute时，该元素将从文档中删除，并准确放置在您告诉它的位置。

see examples and more at Learn More at ammanu

Answer 3

绝对位置

绝对位置元素相对于第一个具有静态位置的父元素定位。从正常流中删除绝对定位的元素。文档和其他元素的行为类似于绝对定位的元素不存在。绝对定位的元素可以与其他元素重叠。

位置相对

相对定位元素相对于其正常位置定位。相对定位元素的内容可以移动并与其他元素重叠，但元素的保留空间仍保留在正常流中。

Answer 4

绝对定位：元素相对于层次结构中第一个非静态（例如相对）定位的父元素定位相对定位：元素相对于其自身位置定位，由浏览器在渲染文档流中确定。

所以，考虑wrap元素应该是box元素的包装 - ＆gt;你需要包装为亲戚和盒子作为绝对。

我不理解CSS中的绝对和相对定位

4 个答案: