overflow-x滚动容器内绝对定位ul不可见，求纯CSS解决方案

在设置了height和overflow-x: scroll的div容器中，内部的绝对定位ul元素无法正常显示，尝试z-index等CSS规则后问题仍未解决，需要纯CSS解决方案。

原代码示例 #

CSS #

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  border: solid 1px red;
  height: 150px;
  width: 100%;
  overflow-x: scroll;
  overflow-y: visible;
}

.container div {
  position: relative;
  width: 150px;
  height: 100%;
  display: inline-block;
  border: 1px solid black;
}

ul {
  position: absolute;
  top: -100px;
  left: 0;
  height: 100%;
  background-color: #3f3;
}

HTML #

<div class="container">
  <div>
    test 1
    <ul>
      <li>menu 1</li>
      <li>menu 2</li>
    </ul>
  </div>
  <div>
    test 2
  </div>
</div>

问题原因 #

浏览器对overflow属性有固定渲染规则：当容器设置overflow-x: scroll/auto，同时显式声明overflow-y: visible时，浏览器会强制将overflow-y解析为auto，导致容器外的垂直内容被裁剪，这是浏览器默认行为，和z-index无关。

纯CSS解决方案 #

利用CSS transform属性让ul元素脱离容器的裁剪上下文，无需修改HTML结构：

修改后的CSS代码 #

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  border: solid 1px red;
  height: 150px;
  width: 100%;
  overflow-x: scroll;
  overflow-y: visible;
}

.container div {
  position: relative;
  width: 150px;
  height: 100%;
  display: inline-block;
  border: 1px solid black;
  /* 添加transform创建新堆叠上下文，脱离容器裁剪限制 */
  transform: translateZ(0);
}

ul {
  position: absolute;
  top: -100px;
  left: 0;
  height: 100%;
  background-color: #3f3;
}

方案说明 #

给ul的父元素（.container div）添加transform: translateZ(0)，会触发GPU加速并创建新的堆叠上下文，让内部的绝对定位ul不再受容器overflow-x的垂直裁剪限制，从而正常显示在容器外部。

若允许调整HTML结构，也可将ul移出容器内的div，放在与容器同级的位置，通过定位关联到目标div，但这种方法需要修改HTML结构，不如transform方案简洁。

内容的提问来源于stack exchange，提问作者Ben