Absolute positioning

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

Since absolute positioning puts the container in line with its first parent, should you place the second block at the top of the browser and then leave 100 pixels? With this definition of absolute positioning, should these two fields not overlap? Instead, the second box ends below the first window. I thought absolute positioning removes an object from a normal page stream? Can anyone explain this to me?

Here is what I am saying: http://jsfiddle.net/WScGM/

Answer 1

W3C :

.

... "", "", "" ""

"" "" ( ). /// - "". , . :

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

, , , 100 . , .

100 ,

top:0;

CSS.

Answer 2

- , , .

, , . , ( ) .

, , , .

, , , .

. , , .

: , 100 ? ?

, , , , .

, .

absolute :

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

, . . :

FIDDLE

Answer 3

You need to add "top: 0" for the second field to overlap.