第三十七节 绝对定位 

 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>

 

posted @ 2020-03-05 23:24  kog_maw  阅读(120)  评论(0)    收藏  举报