相对定位

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript">
 7         </script>
 8     <style type="text/css">
 9         /*
10         定位:
11         将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素
12         通过position属性来设置元素的定位
13         可选值
14         static 默认值,元素没有开启定位
15         relative 开启元素的相对定位
16         absolute 开启元素的绝对定位
17         fixed 开启元素的固定定位(也是绝对定位的一种)
18         */
19         .box1{
20             width: 200px;
21             height: 200px;
22             background-color: antiquewhite;
23             }
24             /*
25             当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化、
26             当开启了元素的定位即position属性值是一个非static值时,
27             可以通过left right top bottom四个属性来设置元素的偏移量
28             left 元素相对于其定义位置的左侧偏移量
29             right 元素相对于其定义位置的右侧偏移量
30             top 元素相对于其定义位置的上边偏移量
31             bottom 元素相对于其定义位置的下边偏移量
32             通常偏移量只需要使用两个就可以对一个元素进行定位
33             一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
34             
35             
36             当元素的position属性设置为relative时,则开启了元素的相对定位
37             1.当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化
38             2.相对定位是相当于元素在文档流中原来的位置进行定位
39             3.相对定位的元素不会脱离文档流 box2移下来以后box3不会移动上去
40             4.相对定位会使元素提升一个层级
41             5.相对定位不会改变元素的性质,块还是块,内联还是内联
42             */
43         .box2{
44             width: 200px;
45             height: 200px;
46             background-color: yellow;
47             position: relative;
48             left: 100px;
49             top: 200px;
50         }
51         .box3{
52             width: 200px;
53             height: 200px;
54             background-color: cadetblue;
55             
56         }
57         .s1{
58             position: relative;
59             width: 200px;
60             height: 200px;
61             background-color: aquamarine;
62         }
63     </style>
64        
65     </head>
66     <body>
67     <div class="box1"></div>
68     <div class="box2"></div>
69     <div class="box3"></div>
70     <span class="s1">我是一个span</span>
71     </body>
72 </html>

 

posted @ 2019-07-19 15:08  zuiaimiusi  阅读(198)  评论(0编辑  收藏  举报