Home > Developer > Web Develop
The conclusions on relative positioning are as follows
1. Using a relatively positioned box, the new position is reached by offsetting the specified distance, relative to its original position.
2. A box with relative positioning is still in the standard flow, and it has no effect on the parent block and the sibling box.
<HTML> <Head> <Metahttp-equiv= "Content-type"content= "text/html;CharSet=utf-8″/> <title>Untitled Document</title> <styletype= "Text/css">Body{margin:15px;font-family:Arial;font-size:12px; }. Father{Background-color:#ffff99;Border:1px solid #000000;padding:20px; }. Father Div{Background-color:#00ff00;padding:10px;Border:1px dashed #000000; }#block2{}</style> </Head> <Body> <Divclass= "Father"> <Div>Box-1</Div> <DivID= "Block2″>Box-2</Div> <Div>Box-3</Div> </Div> </Body> </HTML>
Static is the default value, which is the flow layout that should be on, from left to right, top to bottom.
Relative (relative positioning), by setting the Position property to relative, in the set specific direction of the offset to achieve, top left right Botton
Modify the code as follows, you can find box-2 offset, but no impact on box-3,
#block2 {
position:relative;
left:30;
top:20;
}
CSS positioning: relative positioning
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
