The location and application of CSS elements in Web page making

css| Web | detailed

1. position:static| No location
Position:static is the default value for all elements to be positioned, usually without reference, unless there is a need to cancel the inheritance of other positioning

Example
#div-1 {
position:static;
}

2. position:relative| relative positioning

Using position:relative, you need to top,bottom,left,right4 a property to match the location of the element.
If you want to move the Div-1 layer down 20px, move left 40px:

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

If a relative position is used, the layer divafter that follows him will not appear below the Div-1, but with Div-1 at the same altitude.

Visible, position:relative, not very easy to use.

3. position:absolute| Absolute Positioning

Using Position:absolute, you can move the element exactly where you want it,
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 layer at the front or back of the DIV-1A layer that uses absolute positioning will assume that the layer does not exist and does not affect them in the slightest. So Position:absolute is useful for putting an element in a fixed position, but don't implement it if you need to determine the position of the DIV-1A layer relative to the nearby layer.

* There's a win IE bug to mention that 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 positioning + relative positioning

If the parent element (DIV-1) is defined as a 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), not the entire page.
Position the DIV-1A to 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 position:relative + Position:absolute theory and implement two-column layouts.

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;/* parent Element Relative positioning * *
}
#div -1a {
Absolute positioning of position:absolute;/* elements * *
top:0;
right:0;
width:200px;
}
#div -1b {
Absolute positioning of position:absolute;/* elements * *
top:0;
left:0;
width:200px;
}

Note that in this example, the height of the parent element will not change with the height of the child element, so if the background and border of the parent element need to be defined a high enough height 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 located in the horizontal coordinates, can not be located in the 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 achieve two-column layout

If you let one element Float:left, another float:right, and control their width, you can achieve the layout effect of both columns.

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

8.clear float| Clear Float

If you don't want the following element floating around in the float to surround it, you use the clear,clear to have three values, clear:left (clear left float), clear:right (clear right float), Clear:both; Clear all floats).

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:190px;
}
#div -1b {
Float:left;
width:190px;
}
#div -1c {
Clear:both;
}

At this point, this CSS positioning part of the end, you can experience to deepen the impression.