CSS定位position

position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型。

position:static(默认值)relative(相对定位)absolute(绝对定位)fixed(固定定位)

 

1.相对定位relative

定义三个div,颜色分别为红绿蓝,因为div是块级元素,所以呈以下分布:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>定位</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10         }
11         #box1{
12             background: red;
13         }
14         #box2{
15             background: green;
16         }
17         #box3{
18             background: blue;
19         }
20     </style>
21 </head>
22 <body>
23     <div id="box1"></div>
24     <div id="box2"></div>
25     <div id="box3"></div>
26 </body>
27 </html>

 

 给绿色的div做相对定位(相对于自己当前的位置进行定位):

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>定位</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10         }
11         #box1{
12             background: red;
13         }
14         #box2{
15             background: green;
16             /*相对定位*/
17             position: relative;
18             top: 200px;
19             left: 200px;
20         }
21         #box3{
22             background: blue;
23         }
24     </style>
25 </head>
26 <body>
27     <div id="box1"></div>
28     <div id="box2"></div>
29     <div id="box3"></div>
30 </body>
31 </html>

 

2.绝对定位absolute

 给绿色的div做绝对定位:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>定位</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10         }
11         #box1{
12             background: red;
13         }
14         #box2{
15             background: green;
16             position: absolute;
17         }
18         #box3{
19             width: 300px;
20             height: 300px;
21             background: blue;
22         }
23     </style>
24 </head>
25 <body>
26     <div id="box1"></div>
27     <div id="box2"></div>
28     <div id="box3"></div>
29 </body>
30 </html>

 

 给做了绝对定位(原有的空间位置是不在了的)的绿色div设置top和left观察它的位置:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>定位</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10         }
11         #box1{
12             background: red;
13         }
14         #box2{
15             background: green;
16             position: absolute;
17             top: 200px;
18             left: 200px;
19         }
20         #box3{
21             width: 300px;
22             height: 300px;
23             background: blue;
24         }
25     </style>
26 </head>
27 <body>
28     <div id="box1"></div>
29     <div id="box2"></div>
30     <div id="box3"></div>
31 </body>
32 </html>

 

 可以观察到绝对定位是以其他元素作为参照物移动指定的距离的方式

关于绝对定位的参考点

  1. 如果元素的外层元素是非static(有了默认值之外的定位设置)那么这层元素就成为该元素的默认参考点
  2. 如果元素的外层元素没有设置任何position的值。那么该元素将寻找距离自己最近的其他设置过position的外层元素作为参照物(必须为嵌套层)
  3. 如果该元素的外层元素没有任何一个元素采用position定位,那么此时定位的参考元素为body或者说页面

3.固定定位

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>固定定位</title>
 6     <style>
 7         div{
 8             height: 10000px;
 9             background: green;
10         }
11         div>div{
12             width: 100px;
13             height: 200px;
14             background: yellow;
15             position: fixed;
16             right: 0;
17             top: 300px;
18         }
19     </style>
20 </head>
21 <body>
22     <div>
23         <div></div>
24     </div>
25 </body>
26 </html>

 

posted @ 2020-11-06 13:12  熔岩魔神  阅读(282)  评论(0编辑  收藏  举报