Question

我正在读这个article about position，我不明白为什么in this example相对定位的div受到BODY的影响，但绝对定位的盒子会忽略它？
Aren'他们假设当它们位于另一个元素内时表现相同吗？

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;
}

Answer 1

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

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

相对和绝对之间的差异是相对与自身“相对”（left:15px将其填充到左侧15px），但绝对是相对于其父（第一个非静态父级）并应用相同的属性（左：15px）将导致它从父元素的左边缘移开15px。

这实际上是一项引人入胜的研究，对于理解网页布局非常有帮助。

Answer 2

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

使用绝对位置，我们可以在页面的任何位置移动一个html元素。如果我们没有定义任何位置元素，那么它将从 body 元素获取位置，否则它将采用它#t; s距离最近的定义位置元素的位置。以下是示例。

在这种情况下，＆＃39; div2＆＃39;取自＆lt; div1＆＃39;元件。

<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>

在这种情况下＆＃39; div2＆＃39;从 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>

对于相对位置，html元素可以从它正常移动 position.Below就是一个例子。

在这种情况下，它会从它的10px左侧和10px位置移动。

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

Answer 3

absolute是进行页面布局的最佳选择。它应该有CSS导入的左上角和右下角。并且relative没有来自CSS的任何标记

Answer 4

在显示的示例中：

嗯，对于亲戚来说，没有相对的顶部/底部/左/右，所以它保持在它应该留下的位置。（正文有自己的边距和浏览器定义的填充，你可以覆盖它。）

对于绝对，我们有顶部和左边，所以它稍微提高，因为它忽略任何其他项目。

Answer 5

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

相对：相对类似于没有定位。即使你没有使用亲戚，你也会像这样出现一个div：

margin-left:10px;

向左移动，空间为10px; 同样如果你喜欢这样：位置：相对;

margin-left:10px;

与没有使用亲戚相同。如果绝对用于同一序列中的其他div：位置：绝对的;

margin-left:10px;

它会向左移动总共10 + 10 = 20px的边距。因为在其中添加了10px的绝对的第二div和10px的相对div id。它类似于：

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

相对和绝对之间的差异

5 个答案: