绝对定位 [英] Absolute positioning

问题描述

我正在尝试了解定位的基础知识，并且我在互联网上遇到了这个显示特定属性的示例.本质上，他们用 CSS 创建了两个框:

I'm trying to understand the basics of positioning, and I came across this example on the internet that displays specific properties. Essentially, they created two boxes with CSS:

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

因为绝对定位将容器放置在与其第一个父元素相关的位置，所以不应该将第二个框放置在浏览器的顶部，然后离开 100 像素吗?有了这个绝对定位的定义，两个框不应该重叠吗?相反，第二个框最终位于第一个框下方.我认为绝对定位会从页面的正常流程中删除一个对象?任何人都可以向我解释这一点吗?

Because absolute positioning places the container in relation to its first parent element, shouldn't the second box be placed at the top of the browser, and then left 100 pixels? With this definition of absolute positioning, shouldn't the two boxes overlap? Instead, the second box ends up below the first box. I thought that absolute positioning removes an object from the normal flow of a page? Can anyone explain this to me?

这就是我要说的:http://jsfiddle.net/WScGM/

推荐答案

W3C 说:

绝对定位的盒子脱离了正常的流程.

Absolutely positioned boxes are taken out of the normal flow.

和

框的位置 ... 由 'top'、'right'、'bottom' 和 'left' 属性指定

The box's position ... is specified with the 'top', 'right', 'bottom', and 'left' properties

在您的示例中，您尚未定义顶部"或底部"(垂直位置)的值.top/left/right/bottom 的初始值是auto".所以我相信这就是元素保持垂直位置的原因.实际计算的样式如下所示:

In your example, you haven't defined a value for "top" or "bottom" (the vertical position). The initial value of top/left/right/bottom is "auto". So I believe this is the reason the element keeps its vertical position. The actually calculated styling would look like:

position:absolute;
left:100px;
right:auto;
top:auto;
bottom:auto;

这意味着它的行为就像在正常流中一样，但它更正确 100 像素.但是如果你在文档中放了第三个没有绝对定位的框，绝对的就会重叠起来.

That means it behaves like if it was in the normal flow but it's 100px more right. But if you put a third box without absolute positioning in the document, the absolute one will overlap it.

要将其放置在距左上边缘 100 像素的位置，请添加

To position it 100px from the left upper edge, add

top:0;

到你的 CSS.

这篇关于绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！