绝对定位和固定定位的比较

相同点：定位时都脱离文档流。
不同点：定位时参照对象不同。绝对定位参照离自身最近的定位袓先元素。固定定位则一直以窗口为参照，当出现滚动条时，定位对象不会随着滚动。

<body>
  <style>
    .box {
      text-align: right;
      color: white;
    }
    .box.one {
      width: 300px;
      height: 300px;
      background-color: lightgreen;
      margin: 5em;
    }
    .box.two {
      width: 150px;
      height: 150px;
      background-color: blue;
    }
    .box.three {
      width: 80px;
      height: 80px;
      background-color: red;
    }
  </style>
  <div class="box one">
    <div class="box two"><span>two</span></div>
    <div class="box three"><span>three</span></div>
    <span>one</span>
  </div>
</body>

初始状态：

绝对定位

<style>
  /*绝对定位时one会成为three的参照对象*/
  .box.one {
    position: relative;
  }
  .box.three {
    position: absolute;
    top: 3em;
    left: 3em;
  }
</style>

运行结果：
绝对定位

从运行结果可以看出，绝对定位时 three 是脱离文档流，参照其最近的定位袓先元素 one 做的偏移。

固定定位

<style>
  /* 固定定位 */
  .box.three {
    position: fixed;
    top: 3em;
    left: 3em;
  }
</style>

运行结果：
固定定位

从运行结果可以看出，固定定位时 three 是脱离文档流，参照窗口做的偏移。

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

前端开发环境的学习

2021-09-18 14:42:18