Home > Developer > Web Develop
Grammar
Role
Conditions for using positioning
Summarize
GrammarPosition:static Absolute relative (static, absolute, relative common values).
Parameters
Static: No special positioning, the object follows the 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. The object does not have margins at this point, but it still has 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
RoleAbsolute positioning position is used to locate boxes (such as Div,span, etc.) objects, 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.
Attention
Absolute positioning and float 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, careful not to mix.
Conditions for using positioningPosition:absolute;position:relative absolute positioning use is usually the parent definition position:relative positioning, the child defines the Position:absolute absolute positioning property, And the child uses left or right and top or bottom for absolute positioning.
Small case
CSS style:
1 /*definition, it is usually better to define CSS width and css height*/2 . Divparent{position:relative;width:400px;Border:2px dotted Red;Height:300px;}3 /*this defines the distance between the left side of the parent distance is 10px, and the distance from the parent top is 10px*/4 . Divchildlefttop{position:Absolute; Left:10px;Top:10px;width:100px;Height:100px;Border:2px dotted Blue;}5 /*or*/6 /*this defines the distance from the parent to the right distance of 10px, the distance from the parent bottom is 10px*/7 . Divchildrightbottom{position:Absolute; Right:10px;Bottom:10px;width:100px;Height:100px;Border:2px dotted Black;}
HTML code:
1 <Divclass= "Divparent">2 <Divclass= "Divchildlefttop"></Div>3 <Divclass= "Divchildrightbottom"></Div>4 </Div>
Results:
Note that left and right are only one definition in an object, bottom (bottom) and top (top) are only one definition in an object. Actually also easy to understand, if one day as the cock silk you, was two women's one left and one right pull, you are not also very embarrassed?
SummarizeUse position:absolute;position:relative for absolute positioning layouts, define positioning via CSS, div layout html, note where to use position:relative, where to use position: Absolute positioning, don't forget to use left, right, top, bottom to locate the specific location. 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.
Reference
Http://www.divcss5.com/rumen/r403.shtml
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
