css| Tutorial
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: The following is a reference fragment:>
#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: Here is a quote fragment:
#div-1 {
position:relative;
top:20px;
left:40px;
If you use relative positioning, 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: Here is a quote fragment:
#div -1a {
Position:absolute;
top:0;
right:0;
width:200px;
The layer at the front or back of the DIV-1A layer using 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: Here is a quote fragment:
<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: Here is a quote fragment:
<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 telling of a husband element does not change with the child element's telling, 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: Here is a quote fragment:
#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: Here is a quote fragment:
#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: Here is a quote fragment:
<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.
