首页 > 代码库 > CSS的相对定位和就对定位

CSS的相对定位和就对定位

2024-08-17 23:07:09   220人阅读

1.元素的position属性的值默认为static 就是没有定位，元素出现在正常的文档流中，，这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的, 使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间, 绝对定位：position:absolute, 被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除.

2.父容器使用相对定位，子元素使用绝对定位后，这样的位置不再于浏览器左上角，而是相对于父容器左上角

3.相对定位和绝对定位需要top，right，bottom。Left使用来定制具体位置，这四个属性只有在该元素使用定位后才会生效，其他情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下。或及时使用左，又使用右。

 4.使用相对定位和绝对定位后，当频幕放大缩小，视图的位置也不会乱跑

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>布局</title>
 6     <style type="text/css">
 7        .main{
 8            width: 100%;
 9            height: 800px;
11            margin:  auto;
12        }   
13        .a{
14            
15            width: 20%;
16            height: 50%;
17            background-color: red;
19            position: relative;
20 
21        }
22 
23        .b{
24         margin-top: -400px;
25            width: 50%;
26            height: 80px;
27        margin-left: 20%;
28            background-color: green; 
29        }
30        .c{
31            
32            width: 50%;
33            height: 320px;
34            margin-left: 20%;
35            top: 80px;
36            background-color: yellow;
37            
38 
39            
40        }
41        .d{
42            margin-top: -400px;
43            margin-left: 60%;
44            width: 20%;
45            height: 400px;
46            background-color:  blue;
47            position: relative;
48           
49 
50        }
51        .g{
52         
53            height: 90%;
54            background-color: cyan;
55 
56 
57        }
58       
59        .h{
60          position: absolute;
61          top: 20%;
62            height: 80%;
63            width: 100%;
64            background-color: orange;
65 
66        }
67        .f{
68            position: absolute;
69            top: 20%;
70            width: 100%;
71            height: 70%;
72            background-color: purple;
73 
74        }
75     </style>
76 </head>
77 <body>
78   <div class="main">
79 
80       <div class="a">a
81     <div class="f">列表</div>
82       </div>
83   
84       
85 
86       <div class="b">b 图片</div>
87 
88       <div class="c">c
89      <div class="g">g</div>
90 
91       </div>
92 
93       <div class="d">d
94      <div class="h">h</div>
95       </div>
96   </div>
97 </body>
98 </html>

 

 技术分享

 

CSS的相对定位和就对定位


联系
我们