CSS + Div CSS tutorial-element Orientation

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
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: # 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 child element (div-1a) the location will be 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:

This Is A div-1a element.

This Is A div-1 element.

# div-1 {
position: relative;
}< br> # div-1a {
position: absolute;
top: 0;
right: 0;
width: 200px;
}< br> 5. two Column Layout | two-column layout
let's practice the theory of position: relative + position: absolute to implement two-column layout.
example:

This is the column-one

this is the column-two

# div-1 {
position: relative;/* relative location of the parent element */
}< br> # div-1a {
position: absolute;/* absolute location of the child element */
top: 0;
right: 0;
width: 200px;
}< br> # div-1b {
position: absolute; /* absolute positioning of sub-elements */
top: 0;
left: 0;
width: 200px;
}note, in this example, we will find that the description of the child element does not change with the description of the child element, so if the background of the parent element is And the border need to define a high enough height to display.

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;
}< br> 7. make two clumn with float | float achieves two-column layout
if one element float: Left; the other float: Right; controls their width, the layout of two columns can be achieved.
example: # div-1a {
float: Left;
width: 150px;
}< br> # div-1b {
float: left;
width: 150px;
}< br> 8. clear float | clear floating
if you do not want the elements floating under the float element to surround it, you can use clear. Clear has three values, clear: Left; (Clear left floating), clear: Right; (clear right floating), clear: both; (clear all floating ).
example:

This is div-1a

This is div-1b

This Is A div-1c

# div-1a {
float: left;
width: pixel PX;
}< br> # div-1b {
float: Left;
width: pixel;
}< BR ># div-1c {
clear: Both;
}