HTML+CSS D09 定位
Posted wentaokyle
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML+CSS D09 定位相关的知识，希望对你有一定的参考价值。
1.定位
（1）相对定位
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
（2）绝对定位
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
例1
1 <html> 2 <head> 3 <title>美团广告</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;} 10 .jiage{position:absolute;left:10px;bottom:30px;} 11 .kankan{position:absolute;right:10px;bottom:30px;} 12 .duanluo p a:link,.duanluo p a:visited{color:#666;text-decoration:none;} 13 .duanluo p a:hover{color:red;text-decoration:underline;} 14 </style> 15 </head> 16 <body> 17 <div class="max"> 18 <div class="tu1"> 19 <img src="images/tu_1.gif" /> 20 </div> 21 <div class="tu2"> 22 <img src="images/tu_2.jpg" /> 23 24 <div class="duanluo"> 25 <p><a href="#">【12店】领航冰品哈根达斯:冰淇淋双球,口味任选两种,节假通用</a></p> 26 </div> 27 28 </div> 29 <div class="jiage"> 30 <img src="images/jiage.PNG" /> 31 </div> 32 <div class="kankan"> 33 <a href="#" target="blank"><img src="images/tu_3.jpg" /></a> 34 </div> 35 </div> 36 </body> 37 </html>
例2
1 <html> 2 <head> 3 <title>美团</title> 4 <style type="text/css"> 5 body,p,h3{margin:0px;padding:0px;font-size:14px;font-family:"宋体";} 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;} 10 .p2 a:hover{color:green;text-decoration:underline;} 11 .p3{font-size:30px;color:#f76120;width:230px;height:50px;padding-left:15px;float:left;font-family:arial;} 12 .p4{color:#999;font-size:14px;} 13 .p5{color:#999;font-size:12px;width:80px;height:50px;text-align:right;float:left;padding-top:5px;} 14 .p6{color:#f76120;} 15 .p7{width:60px;height:54px;position:absolute;left:-1px;top:-1px;} 16 </style> 17 </head> 18 <body> 19 <div class="box"> 20 <p class="p1"><a href="#" target="blank"><img src="images/tu_2.jpg" /></a></p> 21 <h3 class="p2"><a href="#" target="blank">【12店】领航冰品哈根达斯:冰淇淋双球,口味任选两种,节假通用</a></h3> 22 <p class="p3">￥20.8 <span class="p4">原价￥38</span></p> 23 <p class="p5"><a href="#" target="blank"><img src="images/tu_3.jpg" /></a><br /><span class="p6">32</span>人已购买</p> 24 <p class="p7"><img src="images/tu_1.gif" /></p> 25 </div> 26 </body> 27 </html>
以上是关于HTML+CSS D09 定位的主要内容，如果未能解决你的问题，请参考以下文章