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>

 

posted @ 2016-03-14 11:51  wentaokyle  阅读(362)  评论(0)  编辑  收藏  举报
其他资源可以访问我的CSDN博客