Learn CSS positioning in ten steps

Float and clear can be used to implement multiple columns, and the DIV height does not need to be defined by itself, and will automatically change with the content.

1. Position: static

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

Generally, you do not need to specify position: static unless you want to overwrite the previously set position.

#div-1 {
 position:static;
}

2. Position: relative

If you set position: relative, you can use top, bottom, left, and right to move the element relative to the position that should appear in the document. [This means that the element still occupies the original position in the document, but it is visually moved relative to its original position in the document]

#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}

3. Position: absolute

When position: absolute is specified, the element is removed from the document [that is, the position is no longer occupied in the document]. You can accurately follow the top, bottom, left and right.

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

4. Position: relative + position: absolute

If we set relative positioning for the div-1, all elements in the div-1 are positioned relative to the div-1. If you set absolute positioning for the div-1a, you can move the div-1a to the upper right of the div-1.

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

5. Absolute positioning in the two columns

Now you can use relative positioning and absolute positioning to create a two-column layout.

#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. The two columns are definitely positioned as high.

One solution is to set a fixed height for the element. However, this scheme is not suitable for most designs, because we generally do not know how much text will be contained in the element or the exact font size to be used.

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

7. Floating

Absolute positioning does not work for columns with variable heights. The following is another solution.

We can move an element to the left/right, and the text is surrounded by it. This is mainly used for images, but here we use it for a complex layout task (because this is our only tool ).

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

8. Floating Column

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

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

9. Clear floating Columns

After the floating element, we can clear the floating to make other elements locate correctly.

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

 

Original from classic: Learn CSS positioning in ten steps