Question

我正在学习CSS，我想知道为什么我们设置位置：相对即使我们没有设置具体位置，例如left: 20px，top: 10px。下面是一个css代码示例。

#home #header {
    position: relative;
    width: 822px;
    height: 152px;
    margin: 0 19px;
    padding: 0;
    overflow: hidden;
}

#header {
    position: relative;
    width: 822px;
    height: 152px;
    margin: 0 19px;
    padding: 0;
    overflow: hidden;
    background: url(img/bg-content-wrap-top-int.png) no-repeat center bottom;
}

Answer 1

通常是以下三个原因之一：

影响元素的堆叠方式（当您使用或不使用特定z-index定位元素时，它会发生变化）。请参阅https://developer.mozilla.org/en/understanding_css_z-index
正如Niklas Ringdahl所提到的，如果父亲是position:absolute，那么position:relative内部的元素将相对于父元素。请参阅http://css-tricks.com/absolute-positioning-inside-relative-positioning/
确保根据需要应用其他属性或修复故障（作为“黑客”）。这样做有几个与IE相关的原因。

Answer 2

在大多数情况下，它用于为位于0,0内absolute的任何子元素设置#header位置。

通常，如果你这样做：

<div id="header">
    <div id="fos">hehe</div>
</div>

你使用这个css：

#fos {
    position: absolute;
    top: 10px;
    left: 10px;
}

您的#fos元素将从页面左上角定位10,10。但是，如果您将position: relative;放在#header上，则#fos将位于{{1>} 左上角的位置10,10。< / p>

如果#header除了#header之外还有其他内容（这是position: static的默认值），也会发生这种情况，但通常使用position因为它保留了元素在文档流程中。因此，当您进行设置并且未设置任何特定位置时，它将保持不变，但relative位置将会更改。

我为你创建了一个简单的jsFiddle Demo。

（在其他一些情况下也使用 @rhyaniwyn 非常好，我只是想解释一下这个，这是一个非常强大的技术）

Answer 3

这不是强制性的，但如果子元素应该使用position:absolute，那么最好这样做，因为它们的相对位置将使用position:relative

与最近的父元素进行计算

为什么设置位置：相对而不改变位置？

3 个答案: