第三十六节 相对定位 

 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>

 

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