01-CSS定位

　　1. 定位的组成

            - 将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式摆放盒子
            - 定位 = 定位模式 + 边偏移
            - 定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置
       

        2. 定位模式


            属性值           描述
            static         静态定位 - 静态定位是元素的默认方式，即按照标准流来摆放，无定位的意思
            relative       相对定位 - 相对定位是元素在移动位置的时候，是相对于它自身原来的位置而言的
            absolute       绝对定位 - 绝对定位是元素在移动位置时，相对于它祖先元素作为参考系
            fixed          固定定位 - 固定定位是元素固定于浏览器可视区的位置
            sticky         粘性定位 - 粘性定位可以被认为是相对定位和固定定位的混合
       

        3. 边偏移


            边偏移量                示例                                    描述
              top                 top:10px              顶部偏移量，定义元素相对于其父元素上边线的距离
              bottom              bottom:10px           底部偏移量，定义元素相对于其父元素下边线的距离
              left                left:10px             左部偏移量，定义元素相对于其父元素左边线的距离
              right               right:10px            右部偏移量，定义元素相对于其父元素右边线的距离

        4. 静态定位

            - 特点
                · 按照标准流特性摆放位置，它没有边偏移
                · 静态定位在布局上很少用到

        5. 相对定位 relative

            - 特点
                · 他是相对于自身原来位置相对移动的，以自身原来位置作为参考点
                · 移动后，原来的位置依然保留，不会被其他盒子占据，后面的盒子不会向上移动到它原来的位置。即不脱标
 1 <html>
 2 <head>
 3 <style type="text/css">
 4     .box1{
 5         background-color: red;
 6         width:100px;
 7         height:100px;
 8     }
 9     .box2{
10         background-color: yellow;
11         width:100px;
12         height:100px;
13         position: relative;
14         left: 50px;
15     }
16     .box3{
17         background-color: blue;
18         width:100px;
19         height:100px;
20         position: relative;
21         right: 50px;
22     }
23 </style>
24 </head>
25 <body>
26 <div class="box1">1</div>
27 <div class="box2">2</div>
28 <div class="box3">3</div>
29 </body>
30 </html>
View Code

 

        6. 绝对定位 absolute 

            - 特点
                · 元素在移动位置时，相对于它祖先元素作为参考系
                · 如果没有祖先元素或者祖先元素没有使用定位，则以浏览器的document文档为参考系。
                · 如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考系移动位置。
                · 绝对定位不再占有原先默认的位置。脱标
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>定位布局</title>
 8 </head>
 9 <body>
10     <div class="box">
11         <div id="div1">
12             <div id="div2"></div>
13         </div>
14     </div>
15 </body>
16 <style>
17     .box{
18         width: 300px;
19         height: 300px;
20         border: 2px solid black;
21         position:absolute;
22         top:0;
23         bottom:0;
24         left:0;
25         right:0;
26         margin:auto;
27     }
28     #div1{
29         width: 200px;
30         height: 200px;
31         background: red;
32     }
33     #div2{
34         width: 80%;
35         height: 80%; 
36         /* 长宽为祖先元素 box 的80% */
37         background: cyan;
38         top: 20px;
39         left: 20px;
40         /* 以祖先元素为参考点，移动20px */
41         position: absolute;
42     }
43 </style>
44 </html>
View Code

 

        7. 固定定位 fixed

            - 特点
                · 可以在浏览器页面滚动时元素的位置不会改变
                · 以浏览器的可视窗口为参照系移动元素
                · 跟父元素没有任何关系
                · 不随滚动条滚动
                · 固定定位不占有原先的位置

 

        8. 粘性定位(新属性值)

            - 特点
                · 以浏览器的可视窗口为参照系移动元素(固定定位特点)
                · 粘性定位占有原先的位置(相对定位特点)
                · 必需添加top、left、right、bottom中的一个才有效
                · 兼容性差，IE不支持
            - 应用场景
                · 当滚动条到达某一位置时，这个粘性定位的容器才不随滚动条移动而移动

        9. 绝对定位与相对定位使用场景

            - 子元素使用绝对定位，父元素使用相对定位
                · 子级绝对定位不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其它的兄弟元素
                · 父盒子布局时，必需占有位置，因为不占有位置的话，会影响下面盒子的布局，因此父元素只能用相对定位
posted @ 2021-11-14 11:51  TM_cc  阅读(65)  评论(0)    收藏  举报