CSS-15-定位

开发者亚龙技术 2022年11月6日

0 收藏 982 点赞 531 浏览 1181 个字

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <style type="text/css">
             /*定位:
                position:定位属性;
             /*relative:生成相对定位元素,元素所占据的文档流的位置不变,元素本身相对文档流的位置进行偏移*/
             /*absolute:生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位;*/
             /*fixed:生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览窗口进行定位*/
             /*static:默认值,没有定位,元素出现在正常的文档流中,相对于取消定位属性或者不设置定位属性*/
             body{
                 margin: 0;
             }
             .position1{
                 width: 200px;
                 height: 200px;
                 background-color: yellowgreen;
                 text-align:center;
                 line-height:200px;
                 position: relative;
                 /*以元素本身当前位置为参考点*/
                 left: 100px;
                 top:100px
             }
             .position2{
                 width: 200px;
                 height: 200px;
                 background-color: yellow;
                 text-align:center;
                 line-height:200px;
                 position:absolute;
                 /*以设置了定位的父(爷...)级元素当前位置为参考点*/
                 left: 100px;
                 top:100px
             }
             .position3{
                 width: 200px;
                 height: 200px;
                 background-color: gray;
                 text-align:center;
                 line-height:200px;
                 position:fixed;
                 /*以浏览窗口为参考点,不会随滚动条的移动而移动*/
                 left: 300px;
                 top:300px
             }
             .fix{
                 width: 80px;
                 height: 20px;
                 line-height: 20px;
                 text-align: center;
                 background-color: gainsboro;
                 position: fixed;
                 /*以浏览窗口为参考点,不会随滚动条的移动而移动*/
                 bottom: 20px;
                 left: 50px
             }
         </style>
     </head>
     <body style="height: 5000px;">
         <div class="position1">
             box1
             <div class="position2">box2</div>
             <div class="position3">box3</div>
         </div>
         <div class="fix">
             返回顶部
         </div>
     </body>
 </html>