定位 / 层叠上下文 / 响应式设计

概念

当对某个元素应用定位之后，它就已经完全脱离普通的文档流模式了。定位最基本的问题就是元素应该放在哪里？有四个属性可以控制：left / right / top / bottom，这四个属性的应用时离不开一个参考对象的，不同的定位方式，其参考对象是不一样滴，我们将参考对象称作包含块。

position

fixed ---- 固定定位；相对于整个渲染视口

absolute ---- 绝对定位；相对于最近的祖先定位元素

relative ---- 相对定位；定义参考对象（包含块）/ 移动元素本身

sticky ---- 粘性定位

css 画一个三角形

很有趣的现象，如果元素没有宽高的话，边框就会呈现三角形：

.triangle {
  width: 0;
  height: 0;
  border: 50px solid transparent; /* 透明边框 */
  border-bottom-color: red; /* 底边颜色 */
}

层叠上下文与z-index

这里暂时不去讨论浏览器的渲染原理，从一些简单的现象去推理。一个最基本的事实：元素可以互相的覆盖。A 在 B 上面，我们就可以说 A ”覆盖“了 B。就像堆积木一样，从最底层一直往上。其实浏览器也是一样的，绘制之前都会生成一个叫做”绘画记录“的东西，它就记录了元素绘制的优先级，一般来说，层级越低的元素，优先绘制。这也就意味着应用了定位的元素，通常总是较后绘制的。我们可通过 z-index 属性控制层叠顺序。

分层是浏览器提高页面渲染效率的手段，类似 z-index / opacity / transform 这样的属性往往会创建一个层叠上下文。为什么分层，不言而喻。但是想一个问题：分层是如何提高效率的？

一个渲染进程内其实有多个光栅化线程，这个所谓的光栅化简单来说就是将页面内容转化成像素块。多线程带来的基本问题就是资源竞态，分层的话，不同的线程处理不同的层，互不干扰，而且分层之后任务量相对于整个页面的光栅化要小很多。

响应式设计

软件设计的世界里没有”银弹“，但是总会有前辈们总结出来的原则：

• 移动优先

  如果一开始就是要兼容小屏设备的话，那页面的整体布局就应该优先满足这些小屏设备，然后组件扩展到pc端甚至更大屏的设备，这就是一种所谓的”渐进式“的设计。

  满足移动端的页面布局，往往比较容易迁移到 pc 端，反之则不然。

• 媒体查询

  根据不同的屏幕尺寸，应用不同版本的样式。

• 流式布局

  容器根据视口宽度缩放尺寸，其方案其实就是利用一些相对单位，视口空间发生变动的同时，浏览器计算并渲染，响应性高（相对于媒体查询来说）。

当然，这得看产品的性质，像 博客 / 新闻 类的可能确实有这个必要，但是一些比如说后台管理系统之类这种功能性比较强的页面，用户会在页面上做很多复杂的操作，移动端就显得尤为不方便了。

---

Date：2025/05/28

Author：kaiven