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: absolute; 20 /* 设置绝对定位，脱离原本的文档流位置，可从box2的div往上移动看出 */ 21 left: 20px; /* 相对父级元素向右偏移20像素，此时的父级元素是body，因为con没有定位元素 */ 22 top: 20px; /* 相对父级元素向下偏移20像素 */ 23 24 } 25 26 .box2{ 27 width: 100px; 28 height: 100px; 29 background-color: green; 30 margin: 10px; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="con"> 36 <div class="box1"></div> 37 <div class="box2"></div> 38 </div> 39 </body> 40 </html>
第三十七节 绝对定位
猜你喜欢
转载自www.cnblogs.com/kogmaw/p/12423808.html
今日推荐
周排行