CSS position Absolute Positioning Absolute relative

Position is often used for absolute positioning of layers, such as where we have a layer located within a layer, and can be implemented using Position:absolute and position:relative.

First, position grammar and structure-TOP

Position syntax:
Position:static Absolute Relative

Position parameters:
Static: No special positioning, object follows HTML positioning rules
Absolute : Drag objects out of the document stream and use attributes such as left,right,top,bottom for absolute positioning. And its cascade is defined by the CSS Z-index property. Objects do not have margins at this point, but they still have padding and borders
relative : objects are not stackable but will be offset in normal document flow based on attributes such as Left,right,top,bottom

Position Description:
Set the positioning of the object, you can make the layout layer easy position absolute positioning, control the box object more accurate.

Second, position practical use-TOP

Absolute positioning position is used to locate the box object, sometimes a few small objects in a layout, not easy to use CSS padding, CSS margin relative positioning, this time we can use absolute positioning to easily fix. Especially a few small boxes in a box irregular layout, this time we use position absolute positioning is very convenient layout objects.

Absolute positioning position demonstration applicable diagram, irregular layout, for the use of position:absolute;position:relative for absolute positioning

Absolute positioning and float can not be used at the same time, such as a large box is the absolute positioning, some use CSS float floating positioning, so IE6 browser will not show the changes in the object of these absolute positioning and relative positioning, which is IE6 CSS hack bar, pay attention not to mix.

Three, absolute positioning conditions of use-TOP

position:absolute;position:relative Absolute positioning use is usually the parent definition position:relative positioning, the child definition position: Absolute absolute positioning properties, and the child uses left or right and top or bottom for absolute positioning.

. divcss5{position:relative} definition, usually it is better to define CSS width and CSS height
. divcss5-a{position:absolute;left:10px;top:10px} This defines the distance between the left and the parent distance is 10px, and the distance from the parent top is 10px
Or
. divcss5-a{position:absolute;right:10px;bottom:10px} This defines the distance from the parent to the right distance of 10px, the distance from the parent bottom is 10px

corresponding HTML structure
<div class= "DIVCSS5" >
<div class= "Divcss5-a" ></div>
</div>

This definitely locates "Divcss5-a" in the parent "divcss5" box.

Note that left and right are only one definition in an object, bottom (bottom) and top (top) are only one definition in an object.

Iv. position application Case-TOP

Here DIVCSS5 for everyone example application position absolute positioning, we set a outermost box CSS border is red, CSS width for 400px,css height of 200px, the interior contains 2 boxes, for the absolute positioning of the 2 boxes, The first box CSS is named "Divcss5-a", its width is 100px, the background color is black, the height is 100px, the location is 10px from the parent, the distance is 10px, the second box CSS class named "Divcss5-b", its width and height are 50px, The CSS background color is blue, the distance from the parent is 13px, and the parent is 15px from the right.

1, CSS code as follows

1. <style>
2. . divcss5{position:relative;width:400px;height:200px;
3. border:1px Solid #000}
4. /* Define the parent position:relative as the absolute positioning statement.
5. . divcss5-a{position:absolute;width:100px;height:100px;
6. Left:10px;top:10px;background: #000}
7. /* Use the Absolute positioning Position:absolute style and use left top for positioning position */
8. . divcss5-b{position:absolute;width:50px;height:50px;
9. Right:15px;bottom:13px;background: #00F}
10. /* Use the Absolute positioning Position:absolute style and use right bottom to position the location */
11. </style>

2. HTML code Snippet

1. <div  class= "DIVCSS5" >&NBSP;
2.     <div  class= "divcss5-a" > </div> 
3.     <div  class= "divcss5-b" > </div> 
4. </div>&NBSP;

3, Div+css absolute positioning case

Div+css position Absolute Positioning Layout application case

Five, CSS absolute positioning summary-TOP

Usually we use position:absolute;position:relative for absolute positioning layout, to define positioning through CSS, div layout html, note where to use position:relative, Where to use Position:absolute for positioning, and do not forget to use the left, right, top, bottom to locate the specific location of the mate. Absolute positioning if the parent does not use position:relative, and the direct use of position:absolute absolute positioning, this time will be the body tag as the parent, using Position:absolute to define the object regardless of the number of layers in the div structure, Will be dragged out to be absolutely positioned at <body> for the parent (reference level). Absolute positioning is very useful, but remember not to misuse, where all use, so sometimes lazy to calculate the distance up, down, left, and right spacing, and may cause the CSS code bloated, more experience appropriate use, for the use of the place.

In absolute positioning we can use CSS Z-index to define the CSS layer overlap order.

You can use the Photoshop PS slicing tool to get accurate values for left, right, bottom, and top values.

CSS position Absolute Positioning Absolute relative