我不明白在CSS中的绝对和相对定位 [英] I don't understand absolute and relative positioning in CSS
问题描述
body {
margin：0;
}
.wrap {
width：800px;
height：1000px;
职位：亲属;
margin：auto;
背景：＃e3e3e3;
}
.box {
width：400px;
height：400px;
margin：auto;
背景：红色;
位置：绝对;
left：20px;
top：30px;
}
我有一个小标记和一些我正在学习的css，请告诉我为什么 .wrap 其中包含 .box 需要相对而另一个绝对。为什么不能是绝对的，或者是相对的。
这可能是一个愚蠢的问题，但无论我读了多少教程，我都无法解决这个问题。请详细说明。
绝对定位表示元素完全脱离正常流程的页面布局。就页面上的其他元素而言，绝对定位的元素根本不存在。然后，元素本身被分开绘制，在您指定的位置使用左侧，右侧，顶部和底部属性排在最前面。
使用你用这些属性指定的位置，元素被放置在最后一个祖先元素的那个位置，该元素的位置属性不是静态的如果没有指定位置属性，则使用定位元素）;如果不存在这样的祖先，则使用文档主体（浏览器视口）。
例如，如果我有这样的代码：
< body>
< div style =position：absolute; left：20px; top：20px;>< / div>
< / body> ...然后< div>将位于浏览器视口顶部20px处，距离其左边缘20px处。
然而，如果我做了这样的事情：
< div id =outerstyle =position：relative>
< div id =innerstyle =position：absolute; left：20px; top：20px;>< / div>
< / div> ...
然后内部div将被定位20px外部div的顶部，以及距离左边缘20px，因为外部div没有使用position：static，因为我们明确地将它设置为使用position：relative。
另一方面，相对定位就像完全没有定位一样，但是左侧，右侧，顶部和底部属性会将元素从正常布局中推出。尽管如此，页面上的其他元素仍然处于正常位置。
例如，如果我有这样的代码：
< span> Span1< / span>
< span> Span2< / span>
< span> Span3< / span> ...
如果我设置第二个使用相对定位，如下所示：
<跨度> SPAN1< /跨度>
< span style =position：relative; left：-5px;> Span2< / span>
< span> Span3< / span> ...
Span1右侧5px。 Span1和Span3与第一个示例中的坐标完全相同，在Span2的右侧和Span3的左侧之间留下5px的间隔。
希望澄清事情
欲了解更多详情，请参阅： http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
这也是一个不错的选择： http://sitepoint.refererence.sitepoint.com
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;
}
I have a little markup and some css which i'm learning from , Please tell me why .wrap which contains .box needs to be relative and the other absolute. Whycan't both be absolute,or relative.
This may be a stupid question but no matter how many tutorials I read , I can't get around this . Detailed Anwer Please.
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.
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>...then the <div> 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>...
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>...
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.
Hope that clarifies things a bit
For more details refer to this: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
This is also a good one : http://sitepoint.refererence.sitepoint.com
这篇关于我不明白在CSS中的绝对和相对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
