绝对定位

Question

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

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?

Here's what I'm talking about: http://jsfiddle.net/WScGM/

Answer 1

W3C says :

Absolutely positioned boxes are taken out of the normal flow.

and

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

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;

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.

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

top:0;

to your CSS.

Answer 2

Absolute positioning is a very powerful type of positioning that allows you to literally place any page element exactly where you want it.

You can use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning.

If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relatively to the page itself.

The trade-off, and most important thing to remember, about absolute positioning is that these elements are removed from the flow of elements on the page.

An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning.

Now comes your question: 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?

yes of course, by the definition of absolute positioning, the two boxes should overlap, if both are in absolute positioning.

This is because by default one of them is in in static positioning.

Now I have made both in absolute position as following:

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

and so, now they are overlapping.See here:

FIDDLE

Answer 3

您需要为第二个框添加“ top：0”以进行重叠。