search

博客列表 >绝对定位和固定定位的比较

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

zg的php学习
zg的php学习原创
2021年09月28日 11:00:081394浏览

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

  • 相同点：定位时都脱离文档流。
  • 不同点：定位时参照对象不同。绝对定位参照离自身最近的定位袓先元素。固定定位则一直以窗口为参照，当出现滚动条时，定位对象不会随着滚动。
  1. <body>
  2.   <style>
  3.     .box {
  4.       text-align: right;
  5.       color: white;
  6.     }
  7.     .box.one {
  8.       width: 300px;
  9.       height: 300px;
  10.       background-color: lightgreen;
  11.       margin: 5em;
  12.     }
  13.     .box.two {
  14.       width: 150px;
  15.       height: 150px;
  16.       background-color: blue;
  17.     }
  18.     .box.three {
  19.       width: 80px;
  20.       height: 80px;
  21.       background-color: red;
  22.     }
  23.   </style>
  24.   <div class="box one">
  25.     <div class="box two"><span>two</span></div>
  26.     <div class="box three"><span>three</span></div>
  27.     <span>one</span>
  28.   </div>
  29. </body>

初始状态：
初始

绝对定位

  1. <style>
  2.   /*绝对定位时one会成为three的参照对象*/
  3.   .box.one {
  4.     position: relative;
  5.   }
  6.   .box.three {
  7.     position: absolute;
  8.     top: 3em;
  9.     left: 3em;
  10.   }
  11. </style>

运行结果：
绝对定位

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

固定定位

  1. <style>
  2.   /* 固定定位 */
  3.   .box.three {
  4.     position: fixed;
  5.     top: 3em;
  6.     left: 3em;
  7.   }
  8. </style>

运行结果：
固定定位

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

上一条：提交网站地图Sitemap的步骤下一条：Javascript中的变量与常量
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多