CSS 奇葩荟萃
内容提要
本文汇总了CSS中若干反直觉现象：父元素设置overflow:scroll后，绝对定位子元素会撑起父元素；overflow-x与overflow-y中一方非visible时，另一方visible会被计算为auto；transform元素内的fixed子元素会退化为absolute；z-index受层叠上下文影响，可能不按数值大小排列；子元素高度小于文字时，文字溢出无法撑开父元素，需设置overflow:hidden。
延伸解读
overflow 与绝对定位的相互影响
当父元素设置 overflow:scroll 时，绝对定位的子元素会撑起父元素的高度。这是因为绝对定位子元素脱离了文档流，但 overflow 属性会创建新的块级格式化上下文，导致父元素高度被计算为包含该子元素。这一现象在布局中容易引发意外的高度变化，开发者需留意。
overflow-x 与 overflow-y 的联动规则
根据 W3 标准，如果 overflow-x 和 overflow-y 中一个被设置为非 visible 的值，另一个即使显式设置为 visible，也会被计算为 auto。这意味着无法单独在一个方向上保持 visible 而另一个方向滚动，实际效果与预期可能不符。
transform 对 fixed 定位的降级
当元素应用了 transform 属性后，其内部使用 position:fixed 的子元素会退化为 absolute 定位，不再相对于视口固定。这是因为 transform 创建了新的包含块，导致 fixed 定位的参照物改变。这一行为在动画或变换场景中需特别注意。
z-index 与层叠上下文
z-index 的数值大小并不总是决定元素的层叠顺序，因为层叠上下文会影响比较范围。如果元素处于不同的层叠上下文中，即使 z-index 值更大，也可能被其他上下文中的元素覆盖。理解层叠上下文的创建条件对控制元素层级至关重要。
Q&A
为什么父元素设置 overflow:scroll 后，绝对定位的子元素会撑起父元素？
因为绝对定位的子元素会相对于父元素进行定位，当父元素设置 overflow:scroll 时，子元素如果尺寸超过父元素，会触发滚动机制，但子元素本身仍然会撑开父元素的尺寸，导致父元素高度或宽度被撑大。
overflow-x 和 overflow-y 同时设置时，如果其中一个不是 visible，另一个会怎样？
根据 W3 标准，如果 overflow-x 或 overflow-y 中有一个不是 visible 或 clip，那么另一个即使设置为 visible，也会被计算为 auto（或 hidden）。
为什么 transform 元素内的 fixed 定位子元素会表现得像 absolute？
因为 transform 属性会为元素创建一个包含块，导致其内部 fixed 定位的子元素相对于该元素定位，而不是相对于视口，因此效果类似于 absolute。
z-index 数值大的元素为什么不一定显示在最上面？
因为 z-index 受层叠上下文影响，如果元素处于不同的层叠上下文中，它们的 z-index 不能直接比较，可能导致数值大的元素反而被覆盖。
子元素高度小于文字高度时，文字溢出为什么不会撑开父元素？
因为父元素的高度由子元素设置的高度决定，而不是由文字内容撑开。如果子元素设置了固定高度且小于文字高度，文字会溢出，但父元素不会因此变高，导致出现滚动条。
如何解决子元素高度小于文字高度导致的父元素滚动条问题？
给子元素添加 overflow:hidden; 可以隐藏溢出的文字，从而避免父元素出现滚动条。
