CSS element Positioning

CSS element Positioning

1. Position: static | no location
Position: static is the default value for positioning all elements. It is generally not required unless there is a need to cancel the inheritance of other Positioning

Example:
# Div-1 {
Position: static;
}

2. Position: relative | relative positioning
When position: relative is used, top, bottom, left, and rightattributes are required to determine the position of the element.
If you want the div-1 layer to move 20 PX down, move 40px left:

Example:
# Div-1 {
Position: relative;
Top: 20px;
Left: 40px;
}

If relative positioning is used, the layer divafter that follows will not appear below the div-1, but will appear at the same height as the div-1.

It can be seen that position: relative; is not very useful.

3. Position: absolute | absolute positioning
With position: absolute;, You can accurately move the element to the position you want and let me move the div-1a to the top right corner of the page:

Example:
# Div-1a {
Position: absolute;
Top: 0;
Right: 0;
Width: 200px;
}

Using the absolute positioning of the div-1a layer before or after the layer will think that this layer does not exist, does not affect them. So position: absolute; it is useful to place an element in a fixed position, but if you need to determine the position of the div-1a layer relative to the nearby layer, don't implement it.
* Here is a bug in win IE that should be mentioned, if a relative degree is defined for an absolutely positioned element, the width of IE depends on the width of the parent element rather than the width of the entire page.

4. Position: relative + position: absolute | absolute position + relative position
If the parent element (div-1) is defined as position: relative; The child element (div-1a) is defined as position: absolute, then the position of the child element (div-1a) is relative to the parent element (div-1 ), instead of the entire page.
Place the div-1a in the upper right corner of the div-1:

Example:
<Div id = "div-1">
<Div id = "div-1a">
This is div-1a element.
</Div>
This is div-1 element.
</Div>

# Div-1 {
Position: relative;
}
# Div-1a {
Position: absolute;
Top: 0;
Right: 0;
Width: 200px;
}

5. Two Column Layout | two-column layout
Let's practice the theory of position: relative + position: absolute to implement two-column layout.

Example:
<Div id = "div-1">
<Div id = "div-1a"> This is the column-one </div>
<Div id = "div-1b"> This is the column-two </div>
</Div>

# Div-1 {
Position: relative;/* relative positioning of the parent element */
}
# Div-1a {
Position: absolute;/* absolute positioning of sub-elements */
Top: 0;
Right: 0;
Width: 200px;
}
# Div-1b {
Position: absolute;/* absolute positioning of sub-elements */
Top: 0;
Left: 0;
Width: 200px;
}

Note: In this example, we will find that the height of the parent element does not change with the height of the child element, so if the background and border of the parent element need to be defined with a high enough height to be displayed.

6. Float | floating alignment
Use float to locate an element with float: Left; & float: Right; values. This type of positioning can only be located in the horizontal coordinate, not in the vertical coordinate. And let the following elements float around its left or right side.

Example:
# Div-1a {
Float: left;
Width: 200px;
}

7. Make two clumn with float | floating implement two-column layout
If one element float: Left; the other float: Right; controls their width, the layout of the two columns can be achieved.

Example:
# Div-1a {
Float: left;
Width: 150px;
}
# Div-1b {
Float: left;
Width: 150px;
}

8. Clear float | clear floating
If you do not want the elements floating around the float element, you can use clear and clear with three values: clear: left; (Clear left floating), clear: Right; (clear right floating), clear: both; (clear all floating ).

Example:
<Div id = "div-1a"> This is div-1a </div>
<Div id = "div-1b"> This is div-1b </div>
<Div id = "div-1c"> This is div-1c </div>

# Div-1a {
Float: left;
Width: pixel PX;
}
# Div-1b {
Float: left;
Width: pixel PX;
}
# Div-1c {
Clear: both;
}

At this point, the position of this CSS is over, and you can learn more from it.