修改 CSS3 中的 overflow-x 属性,会影响同一元素的 overflow-y 属性。
举例:
<div class="relative overflow-y-scroll overflow-x-visible"><div class="static ...">static element</div><!-- more static elements ?--><div class="absolute top-[0] right-[-25px] ...">absolute element</div>
</div>
在该例子中,需求子元素 div.absolute 游离于父元素外的固定位置,且不影响 div.static 的文档流滚动。但即使父元素的 overflow-x 属性被指定为 visible,计算时也仍然会被指定为 auto,导致父元素会被子元素撑开,无法达到预期效果。
解决方式是在父元素和 div.static 之间加一级嵌套,将滚动相关逻辑加入到中间层。如下。
<div class="relative"><div class="overflow-y-scroll"><div class="static ...">static element</div><!-- more static elements ?--></div><div class="absolute top-[0] right-[-25px] ...">absolute element</div>
</div>
