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

news2024/11/25 23:27:22

在现代网页设计中，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>
首先先看下正常的一个样式，三个元素依次居中排列，随着鼠标滚动而滚动

随着时间的变化，我们需要对UI进行升级，升级之后出现下面的情况

示例代码：

css
.button-box {
    margin: 0 8px;
    height: 20px;
    width: 40px;
  }
  .button-box button {
    position: absolute;
  }
从静态看，样式好像没什么变化，三个元素依次居中排列。但是当我们的窗口变小，出现滚动条，鼠标滚动时，button元素保持不动。正是因为加了position: absolute; 导致button脱硫文档流，出现上方bug。

所以，绝对定位（position: absolute）是一个强大的CSS布局工具，但它并不总是最佳选择。有时候，其他布局技术可以提供更灵活或更简单的解决方案。

我们可以从以下三种布局来展开讨论。

1. 维护性和可读性

使用absolute定位会导致元素脱离文档流，使得布局变得更加复杂和难以维护。在大型项目中，随着页面结构的变化，维护absolute定位的元素可能需要更多的时间和精力。

在实际开发中，我们很容易

相比之下，采用基于文档流的布局方式可以更容易理解和修改。

示例代码1：使用文档流布局

html
<div class="container">
  <div class="box"></div>
</div>
css
<style>
  .container {
    position: relative;
    width: 300px;
    height: 200px;
    background-color: #eee;
  }

  .box {
    width: 100px;
    height: 100px;
    background-color: #f00;
  }
</style>
效果图：

2. 响应式设计

在响应式设计中，页面需要根据设备的不同尺寸和方向进行布局调整。使用absolute定位可能会导致元素在不同屏幕尺寸下错位或遮挡其他内容，增加了响应式设计的难度。相比之下，基于文档流的布局更容易适应不同的设备和屏幕尺寸。

示例代码2：响应式布局

html
<div class="container">
  <div class="box"></div>
</div>
css
<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 200px;
    background-color: #eee;
  }

  .box {
    width: 100px;
    height: 100px;
    background-color: #f00;
  }
</style>
效果图：

3. 可访问性

absolute定位的元素可能会遮挡屏幕阅读器的内容，降低网站的可访问性。使用基于文档流的布局可以确保内容在阅读器中正确呈现，提高了网站的可访问性。

示例代码3：增强可访问性

Html
<main>
  <h1>主标题</h1>
  <div class="content">
    <p>网页内容...</p>
  </div>
</main>
css
<style>
  main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .content {
    width: 80%;
    max-width: 800px;
    margin-top: 20px;
  }
</style>
效果图：

综上所述，现代CSS系统倾向于少用或不用absolute定位是为了提高代码的维护性、可读性、响应性设计和可访问性。在实际项目中，我们应该优先考虑使用基于文档流的布局方法，只有在必要时才使用absolute定位。通过合理的布局和样式设计，我们可以创建更易于维护和优化的网站。