相对和绝对值之间的差异

问题描述：

我在阅读这篇关于位置的文章， t了解为什么在此示例中相对定位的div受到影响BODY，但是绝对定位的盒子忽略了它？
当它们位于另一个元素内部时，它们是否表现得相同？

I'm reading this article about position, and I don't understand why in this example the 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?

CSS： / p>

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

答

http://stackoverflow.com/questions/4457790/

绝对定位意味着元素完全脱离页面布局的正常流程。就页面上的其余元素而言，绝对定位的元素不存在，然后使用左，右，上和下属性在所指定的位置单独绘制元素本身，排序为在其他位置。

" Absolute positioning means that the element is taken completely out of the normal flow of the page layout. As far as the rest of the elements on the page are concerned, the absolutely positioned element simply doesn't exist. The element itself is then drawn separately, sort of "on top" of everything else, at the position you specify using the left, right, top and bottom attributes.

使用您使用这些属性指定的位置，元素将放置在其最后一个祖先元素中的该位置，该元素具有除static之外的任何位置属性（静态是定位元素在没有指定位置属性时使用）

Using the position you specify with these attributes, the element is then placed at that position within it's last ancestor element which has a position attribute of anything other than static (static is the positioning elements use if they have no position attribute specified), or the document body (browser viewport) if no such ancestor exists.

例如，如果我有这样的代码：

For example, if I had this code:

<body>
  <div style="position:absolute; left: 20px; top: 20px;"></div>
</body>

...然后将位于浏览器视口顶部20像素，

...then the would be positioned 20 px from the top of the browser viewport, and 20px from the left edge of same.

但是，如果我做了这样的事情：

However, if I did something like this:

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

...然后内部div将位于外部div的顶部20px，从相同的左边缘，因为外部div不定位与position：static，因为我们明确设置为使用position：relative。

...then the inner div would be positioned 20px from the top of the outer div, and 20px from the left edge of same, because the outer div isn't positioned with position:static because we've explicitly set it to use position:relative.

相对定位，另一方面，就像没有定位，但左，右，顶部和底部属性微调元素的正常布局。

Relative positioning, on the other hand, is just like stating no positioning at all, but the left, right, top and bottom attributes "nudge" the element out of their normal layout. The rest of the elements on the page still get laid out as if the element was in its normal spot though.

例如，如果我有这样的代码：

For example, if I had this code:

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

...那么所有三个元素都会相邻，不重叠。

...then all three elements would sit next to each other without overlapping.

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

If I set the second to use relative positioning, like this:

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

...那么Span2会将Span1的右边重叠5px。 Span1和Span3将位于与他们在第一个例子中完全相同的地方，在Span2的右侧和Span3的左侧之间留下5px的间隙。---（ AgentConundrum ）

...then Span2 would overlap the right side of Span1 by 5px. Span1 and Span3 would sit in exactly the same place as they did in the first example, leaving a 5px gap between the right side of Span2 and the left side of Span3." --- (AgentConundrum)

相对和绝对值之间的差异

相关推荐