Detailed description of CSS positioning attribute position

One of the most common layout class attributes in CSS is float, and the other is CSS positioning attribute position.

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 this element relative to the position where the element 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, no position is 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. 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. After the floating column is cleared, we can clear the floating column so that other elements can be correctly located. # Div-1a
{
Float : Left ;
Width : Pixel PX ;
}
# Div-1b
{
Float : Left ;
Width : Pixel PX ;
}
# Div-1c
{
Clear : Both ;
}

 

This article Reprinted from: http://paranimage.com/css-position-attribute/