div的定位讲解

来源：互联网发布：商家给淘宝哪一联发票编辑：程序博客网时间：2024/06/05 16:01

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <style>
   *{
       padding: 0;
       margin: 0;
   }
       .box1{
           width:100px;
           height: 100px;
           background-color: orange;
           margin: 50px;
       }
       .box2{
           width: 50px;
           height: 50px;
           background-color: black;
           /*相对定位:参考自身未改变时在的位子*/
           /*position:relative;*/
           /*绝对定位:它先去寻找围城盒子如围城盒子有定位属性，外层盒子将作为自身的参考位置没有继续找如果都没有参考body*/
           position: absolute;
           left:0px;
           top:0px;
       }
   </style>
   <body>
       <div class='box1'>
           <div class='box2'></div>
       </div>
   </body>
</html>

总结：

相对定位它移动后其占据的位置还是未移动时的位置

绝对定位：它相对与浮在哪个查考的div上不会占空间

0 0