CSS 相对与绝对的区别

Difference between relative and absolute

提问by ilyo

I'm reading this article about position, and I don't understand why in this examplethe relatively positioned div is affected by the BODY, yet the absolutely positioned box ignores it?
Aren't they suppose to behave the same when they are positioned inside another element?

我正在阅读这篇关于 position 的文章，我不明白为什么在这个例子中相对定位的 div 会受到 BODY 的影响，而绝对定位的框却忽略了它？
当它们被定位在另一个元素中时，它们不是应该表现得一样吗？

the CSS:

CSS：

body {
     display: block;
     margin: 8px;
}

#box_1 { 
     position: relative;
     width: 200px;
     height: 200px;
     background: #ee3e64;
}
#box_2 { 
     position: absolute;
     top: 0;
     left: 100px;
     width: 200px;
     height: 200px;
     background: #44accf;
}

回答by Joseph Marikle

Basically you have four position states, which are as follows:

基本上你有四种位置状态，如下所示：

• static (default)
• relative
• fixed
• absolute

• 静态（默认）
• 相对的
• 固定的
• 绝对

The difference between relative and absolute is that relative is "relative" to itself (left:15pxwill pad it to the left with 15px), but absolute is relative to its parent (first non-static parent that is) and applying the same attribute (left:15px) will result in it being shifted 15px away form the left edge of the parent element.

relative 和 absolute 之间的区别在于，relative 与自身“相对”（left:15px将其向左填充 15px），但 absolute 与其父级（即第一个非静态父级）相关并应用相同的属性（左： 15px) 将导致它从父元素的左边缘移动 15px。

This is actually a fascinating study and will help immensely in understanding web layout.

这实际上是一项引人入胜的研究，将极大地帮助理解 Web 布局。

回答by Sheo Dayal Singh

Here is the easy explanation of position: absolute and position: relative.

这是对位置的简单解释：绝对和位置：相对。

With absolute position, we can move an html element anywhere on the page.If we do not define any position element then it will take position from bodyelement otherwise it will take it's position from the nearest defined position element. Below is the example.

使用绝对位置，我们可以将 html 元素移动到页面上的任何位置。如果我们没有定义任何位置元素，那么它将从body元素中获取位置，否则它将从最近的定义位置元素中获取它的位置。下面是示例。

In this case, 'div2' takes the position from 'div1' element.

在这种情况下，“div2”从“div1”元素中获取位置。

<div id='div1' style="position: relative; left: 100px;top: 10px;"> 
<h1>This is the first position element</h1>
<div id='div2' style="  position: absolute;left: 100px;top: 150px;">
<h2>This is a heading with an absolute position</h2>
</div>
</div>

In this case 'div2' takes position from bodyelements as no position is defined.

在这种情况下，'div2' 从body元素中获取位置，因为没有定义位置。

  <div id='div1'> 
    <h1>This is the first position element</h1>
    <div id='div2' style="  position: absolute;left: 100px;top: 150px;">
    <h2>This is a heading with an absolute position</h2>
    </div>
    </div>

With relative position, an html elements can move from it's normal position.Below is the example.

使用相对位置，html 元素可以从它的正常位置移动。下面是示例。

In this case it will move from it's postion 10px left and 10px below.

在这种情况下，它将从它的位置向左移动 10 像素，向下移动 10 像素。

<div id='div2' style="  position: relative;left: 10px;top: 10px;">
<h2>This is a heading with an absolute position</h2>
</div>

回答by ghimire.prabin

absoluteis the best for doing the page layout. it should have the top left right and bottom imported by CSS. and the relativeis done without any tag from CSS

absolute是做页面布局的最佳选择。它应该有由 CSS 导入的左上角和右下角。并且在relative没有来自 CSS 的任何标记的情况下完成

回答by Igoris Azanovas

In example shown:

在示例中显示：

well, for relative there is no top/bottom/left/right for relative, so it stays where it should stay. (body has its own margin and padding defined by browser, which you can override).

好吧，对于相对来说，相对没有上/下/左/右，所以它停留在它应该停留的地方。（主体有自己的边距和由浏览器定义的填充，您可以覆盖它们）。

for absolute, we have top and left, so it goes a little up, as it ignore any other items.

绝对的，我们有顶部和左侧，所以它会上升一点，因为它忽略了任何其他项目。

回答by Nadeem dar

The explanations and descriptions explained above are well but for a normal person or a beginner it is difficult to understand. Its simple.

上面的解释和描述很好，但是对于普通人或初学者来说，很难理解。这很简单。

Relative: Relative is similar to no positioning. Even if you haven,t used relative , and you make a div appear just like this:

相对：相对类似于没有定位。即使你没有使用过 relative ，你让一个 div 看起来像这样：

margin-left:10px;

It would move to the left having space of 10px; And similarly if you do like this: position:relative;

它会向左移动 10px 的空间；同样，如果你这样做： position:relative;

margin-left:10px;

It would be same as no relative was used. And if absolute is used for some other div in same sequence: position:absolute;

这将与没有使用亲戚一样。如果以相同的顺序将 absolute 用于其他某个 div： position:absolute;

margin-left:10px;

The it would move a total of 10+10=20px margin-left. Because 10px of the second div of absolute and 10 px of relative div id is added in it. It is similar to doing:

它将总共移动 10+10=20px margin-left。因为其中添加了绝对的第二个div的10px和相对的div id的10px。它类似于：

#div1{
float:left;
margin-left:10px;
} 
#div2{
float:left;
margin-left:10px;
}