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>
时间： 2024-10-08 18:24:08