定位html-CSDN博客

本文链接：https://blog.csdn.net/2501_90859196/article/details/147479473

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>定位</title>
       <style>
           *{
               margin: 0;
               padding: 0;
           }
           .box{
               position: absolute;
               top: 100px;
               left: 200px;
               width: 400px;
               height: 400px;
               background-color: pink;
           }
           .bigbox{
               position: relative;
               width: 800px;
               height: 800px;
               background-color: pink;
           }
           .bigbox .sbox{
               position: absolute; /* 绝对定位 */
               right: 100px;
               bottom: 200px;
               width: 200px;
               height: 200px;
               background-color: skyblue;
           }
           .box3{
               position: fixed;
               top: 200px;
               left: 180px;
               width: 1000px;
               height: 300px;
               background-color: aqua;
           }
           /* 定位:定位模式+边偏移
           定位模式:
           1.相对定位relative:相对自己原先的位置进行偏移.
           2.绝对定位absolute:参照有定位的父盒子进行偏移，如果父盒子都没有定位，最终参照body
           大相小绝/子绝父相
           注意：绝对定位的盒子会脱离标准流（脱标）！！
           3.固定定位fixed
           */
       </style>
   </head>
   <body>
       <div class="box"></div>
       <div class="bigbox"></div>
       <div class="sbox"></div>
       <div class="box3"></div>
   </body>
</html>