Angular 由一个bug说起之五：为什么现代CSS系统倾向于少用或不用absolute定位？

KenkoTech

于 2024-04-26 14:17:47 发布

阅读量636

点赞数 13

CC 4.0 BY-SA版权

分类专栏： Angular 文章标签： angular

本文链接：https://blog.youkuaiyun.com/KenkoTech/article/details/138209250

本文探讨了现代前端开发中减少使用`position:absolute`的原因，包括维护性、响应式设计和可访问性。作者通过实例展示了基于文档流的布局方法作为更优选择，并提倡在必要时才使用绝对定位以优化网站性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在现代网页设计中，CSS（层叠样式表）是不可或缺的一部分。在过去，使用position: absolute定位元素是一种常见的技术，但是随着前端开发的发展，现代CSS系统倾向于减少或避免使用absolute定位。本文将探讨这一趋势的原因，并提供一些示例代码以说明替代方法。

这里我们先举一个关于脱离文档流的bug例子，是我们项目中真实遇到的一个bug。

示例代码：

html
<div class="container">
  <div class="bigbox">
    <div class="box">
      <label class="label-selected">Collapsed All</label>
      <div class="button-box">
        <button>switch</button>
      </div>
      <label class="label-selected">Expanded All</label>
    </div>
  </div>
   
</div>
css
<style>
  .container {
    height: 400px;
    overflow: scroll;
  }
  .bigbox {
    height: 800px;
  }
  .box {
     display: flex;
     line-height: 25px;
     align-items: center;
     margin-top: 10px;
  }
  .label-selected {
      font-weight: 600;
      font-size: 14px;
      line-height: 20px;
      margin: 0 10px;
     }
  .button-box {
    margin: 0 8px;
  }
</style>
首先先看下正常的一个样式，三个元素依次居中排列，随着鼠标滚动而滚动

最低0.47元/天解锁文章