Html+css D09 Positioning

1. Positioning

(1) Relative positioning

If a element is positioned relative to it, it will appear where it is located. You can then move the element "relative to" its starting point by setting a vertical or horizontal position.

#box_relative {
position:relative;
left:30px;
top:20px;
}

(2) Absolute positioning

The position of an absolutely positioned element is relative to the nearest positioned ancestor element , and if the element does not have a positioned ancestor element, then its position is relative to the original containing block .

#box_relative {
Position:absolute;
left:30px;
top:20px;
}

Example 1

1 2 3 <title> US advertising </title>4 <style type= "Text/css" >5 body,div,p{margin:0px;padding:0px;}6 . Max{width:330px;Height:335px;margin:200px Auto;position:relative;Border:1px solid #ddd;}7 . TU1{position:Absolute; Left:0px;Top:0px;Z-index:1;}8 . TU2{position:Absolute; Left:10px;Top:10px;}9 . Duanluo{position:relative; Left:0px;Top:15px;Font-weight:Bold;Height:40px;Line-height:23px;}Ten . Jiage{position:Absolute; Left:10px;Bottom:30px;} One . Kankan{position:Absolute; Right:10px;Bottom:30px;} A . Duanluo p A:link,.duanluo p a:visited{Color:#666;text-decoration:None;} - . Duanluo P a:hover{Color:Red;text-decoration:Underline;} - </style> the  - <body> - <div class= "Max" > - <div class= "TU1" > +  - </div> + <div class= "TU2" > A  at          - <div class= "Duanluo" > - <p><a href= "#" > "12 Shop" Espier Ice Products Haagen-Dazs: Ice cream Double ball, taste choice two kinds, festival false general </a></p> - </div> -          - </div> in <div class= "Jiage" > -  to </div> + <div class= "Kankan" > - <a href= "#" target= "blank" ></a> the </div> * </div> $ </body>Panax Notoginseng 

Example 2

1 2 3 <title> American Group </title>4 <style type= "Text/css" >5 Body,p,h3{margin:0px;padding:0px;font-size:14px;font-family:"The song Body";}6 . Box{width:340px;Height:335px;Border:1px solid #eee;margin:20px Auto;position:relative;}7 . P1{width:310px;Height:190px;Padding-left:15px;Padding-top:10px;}8 . P2{width:310px;Height:60px;Line-height:25px;Padding-left:15px;Padding-top:15px;font-size:20px;}9 . P2 a:link,.p2 a:visited{Color:#666;text-decoration:None;}Ten . p2 a:hover{Color:Green;text-decoration:Underline;} One . P3{font-size:30px;Color:#f76120;width:230px;Height:50px;Padding-left:15px;float: Left;font-family:Arial;} A . P4{Color:#999;font-size:14px;} - . P5{Color:#999;font-size:12px;width:80px;Height:50px;text-align: Right;float: Left;Padding-top:5px;} - . P6{Color:#f76120;} the . P7{width:60px;Height:54px;position:Absolute; Left:-1px;Top:-1px;} - </style> -  - <body> + <div class= "box" > - <p class= "P1" ><a href= "#" target= "blank" ></A></P&G t; + 
 A <p class= "P3" >￥20.8 <span class= "P4" > Original price ￥38</span></p> at <p class= "P5" ><a href= "#" target= "blank" ></a><br/ ><span class= "P6" >32</span> person purchased </p> - <p class= "P7" ></p> - </div> - </body> - 

Html+css D09 Positioning