CSS element Positioning _css/html

CSS element Positioning

1. position:static| No positioning
Position:static is the default value for all element positioning, usually not noted, unless there is a need to cancel the inheritance of other positioning

Example
#div-1 {
position:static;
}

2. position:relative| relative positioning
With position:relative, you need to top,bottom,left,right4 properties to mate to determine the position of the element.
If you want the DIV-1 layer to move down 20px, move the 40px to the left:

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

If relative positioning is used, immediately following his layer Divafter will not appear below the Div-1, but with Div-1 at the same height.

Visible, position:relative; not very useful.

3. position:absolute| Absolute Positioning
With Position:absolute, you can move the element exactly where you want it, and 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;
}

The layers in front of or behind the DIV-1A layer using absolute positioning assume that the layer does not exist and does not affect them at all. So position:absolute; it is useful to place an element in a fixed position, but it is not possible to determine the position of the DIV-1A layer relative to the nearby layer.
* Here is a win IE bug to mention, that is, if the absolute positioning of the element to define a relative degree, then under IE its width depends on the width of the parent element rather than the width of the entire page.

4. position:relative + position:absolute| Absolute positioning + relative positioning
If the parent element (DIV-1) is defined as position:relative, and the child element (DIV-1A) is defined as Position:absolute, the position of the child element (DIV-1A) is relative to the parent element (Div-1) instead of the entire page.
To position the DIV-1A in the upper right corner of the Div-1:

Example


This is div-1a element.

This is Div-1 element.

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

5. Both column layout| two columns layout
Let's practice position:relative + Position:absolute theory and implement two-column layouts.

Example

The Column-one
The Column-two

#div-1 {
position:relative;/* parent Element Relative positioning */
}
#div -1a {
position:absolute;/* Sub-element absolute positioning */
top:0;
right:0;
width:200px;
}
#div -1b {
position:absolute;/* Sub-element absolute positioning */
top:0;
left:0;
width:200px;
}

Note that in this example, the height of the parent element is not changed as the child element tells you, so if the parent element's background and border need to be defined a height high enough to be displayed.

6.float| Floating Alignment
Use float to locate an element with a float:left;&float:right; of two values. This positioning can only be positioned in horizontal coordinates and cannot be positioned in vertical coordinates. And let the following element float around its left or right.

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

7.make two clumn with float| floating to implement both column layouts
If one element is Float:left, the other float:right, and the width is controlled, the layout effect of the two columns can be achieved.

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

8.clear float| Clear Float
If you do not want to let the elements below float around it using the float element, then you use Clear,clear with three values, clear:left; (clear left float), clear:right; (clear right float), Clear:both; Clear all floats).

Example
This is div-1a
This is div-1b
This is div-1c

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

At this point, the positioning of this CSS section is over, you can experience the experience to deepen the impression

