1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .con{ 8 width: 300px; 9 height: 400px; 10 border: 1px solid #000; 11 margin: 50px auto 0; 12 } 13 14 .box1{ 15 width: 100px; 16 height: 100px; 17 background-color: gold; 18 margin: 10px; 19 position: relative; 20 /* 设置相对定位，保持原本的文档流位置，可从box2的div没有往上移动看出 */ 21 left: 20px; /* 相对自身向右偏移20像素 */ 22 top: 20px; /* 相对自身向下偏移20像素 */ 23 } 24 25 .box2{ 26 width: 100px; 27 height: 100px; 28 background-color: green; 29 margin: 10px; 30 } 31 </style> 32 </head> 33 <body> 34 <div class="con"> 35 <div class="box1"></div> 36 <div class="box2"></div> 37 </div> 38 </body> 39 </html>
第三十六节 相对定位
猜你喜欢
转载自www.cnblogs.com/kogmaw/p/12423801.html
今日推荐
周排行