CSS position full parsing

1, Position:static

The default positioning of all elements is position:static, which means that the element is not positioned and appears in the document where it should be.

2, Position:relative

If you set position:relative, you can use Top,bottom,left and right to move this element relative to where the element should appear in the document. "means that the element actually still occupies the original position in the document, but is visually moved relative to its original position in the document."

3, Position:absolute

When Position:absolute is specified, the element is detached from the document "that is no longer in position in the document" and can be positioned exactly as set top,bottom,left and right.

4, position:relative + Position:absolute

If we set relative positioning for Div-1, then all elements within the Div-1 will be positioned relative div-1.

5, two columns absolute positioning

#div-1 {  position:relative;} #div -1a {position:absolute;  top:0;  right:0;  width:200px;} #div -1b {  position:absolute;  top:0; left:0;  width:200px;}

　　

6. Floating

for variable height columns, absolute positioning doesn't work, and here's another scenario. we can float an element so that it moves to the left/right, and it is text that surrounds it.

#div -1a {float:left; width:200px;}

　　

7. Floating column

If we float an element to the left and float the second element to the left, they will push up against every other.

#div -1a {float:left; width:150px;} #div -1b {float:left; width:150px;}

　　

8. Clear Floating Column

After floating the element, we can clear the float so that the other elements are positioned correctly.

#div -1a {float:left; width:190px;} #div -1b {float:left; width:190px;} #div -1c {clear:both;}

　　

The information is from the network.