美文网首页
前端开发 --相对定位和绝对定位理解

前端开发 --相对定位和绝对定位理解

作者: 码农冰冰 | 来源:发表于2020-05-08 14:44 被阅读0次

一直很模糊绝对定位和相对定位,今天写个demo观察变化理解下:

绝对定位

基于绝对定位的元素不会占据空间,脱离文档流。绝对定位会相对这个屏幕。

相对定位

它以自身原先的位置为参照物向上下左右移动,但是当它移动之后,原有的位置空间存在。

 <body>
    <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
  </div>
<!-- <div class="second">


</div> -->
  </body>
<style>
  .box {
       width: 1100px;
       height: 900px;
       background-color: black;
       position: relative;

   }

   .box1 {
       width: 100px;
       height: 100px;
       background-color: pink;
       position: relative;
       left: 100px;
       top: 10px;
   }

   .box2 {
       width: 100px;
       height: 100px;
       background-color: green;
       position: absolute;
       /* left: 100px;
       bottom: 50px; */
       left: 10px;
       top: -10px;
   }

   .box3 {
       width: 100px;
       height: 100px;
       background-color: yellow;
       /* position: relative; */
       left: 10px;
       bottom: 20px;
   }

   .box4 {
       width: 100px;
       height: 100px;
       background-color: blue;
       /* position: relative; */
       top: 150px;
       left: 100px;
   }
  

</style>

[图片上传失败...(image-8ee78c-1588920237217)]
)

相关文章

网友评论

      本文标题:前端开发 --相对定位和绝对定位理解

      本文链接:https://www.haomeiwen.com/subject/wvdfnhtx.html