div的定位讲解

最新推荐文章于 2021-05-30 18:29:50 发布

yinbucheng

最新推荐文章于 2021-05-30 18:29:50 发布

阅读量788

点赞数

本文链接：https://blog.csdn.net/yinbucheng/article/details/51444259

版权

<!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上不会占空间

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yinbucheng

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div的定位讲解

*{ padding: 0; margin: 0; } .box1{ width:100px; height: 100px; background-color: orange; margin: 50px; }
复制链接

扫一扫