定位css-优快云博客

本文链接：https://blog.youkuaiyun.com/ZhouCcx/article/details/147628949

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>定位</title>
       <style>
           *{
               margin: 0;
               padding: 0;
           }
           div{
               width: 300px;
               height: 280px;
               border: 1px solid orange;
               font-size: 36px;
               text-align: center;
               line-height: 280px;
           }
           .box1,.box2{
               /* 相对定位:参考元素原先的位置进行偏移 */
               position: relative; /* 定位模式 */
               top: 150px;
               left: 200px;
           }
           .box3{
               /* 绝对定位:参照有定位的祖先元素，如果祖先元素都没有定位，则参考body进行偏移 */
               /* 绝对定位的盒子会脱离标准流 */
               position: absolute;
               top: 150px;
               left: 200px;
           }
           .fixbox{
               width: 80px;
               height: 200px;
               background-color: aqua;
               /* 固定定位:固定在窗口的某一个位置,偏移参照的窗口 */
               position: fixed;
               right: 10px;
               bottom: 30px;
           }
           /* 定位的应用:大相小绝/子绝父相 */
       </style>
   </head>
   <body>
       
       <div class="box1">1</div>
       <div class="box2">2</div>
       <div class="box3">3</div>
       <div class="box4">4</div>
       <div class="fixbox"></div>
   </body>
</html>