CSS tutorial-element locating

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:
The following is a reference clip:>
# 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:
The following is a reference clip:
# 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
You can use position: absolute; to accurately move elements to the desired position,
Let me move the div-1a to the upper right corner of the page:
Example:
The following is a reference clip:
# 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. If you define a relative width 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: