CSS 水平滚动容器，带有垂直溢出的叠加层

Question

我正在尝试制作一个包含一堆标签的水平滚动容器。我想制作一个可以出现在选项卡上的叠加层（想想选项菜单）。我想要的是覆盖层位于水平滚动条的顶部。这是我的意思的图像：

但这是我实际得到的：

我用下面的一个小例子重现了我的问题：

.page {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: 0 auto;
}

.header {
  height: 30px;
  background: #ccc;
  display: flex;
}

.items {
  display: flex;
  align-items: stretch;
  margin-right: 0.5rem;
  &:last-child {
margin-right: 0;
  }
  > * {
margin-right: 0.5rem;
&:last-child {
  margin-right: 0;
}
  }
}

//Why I'm using 2 wrappers: https://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent/
.scroll-super-wrapper {
  display: flex;
  flex-grow: 1;
  height: 100%;
  width: 100%;
  position: relative;
}

.scroll-wrapper {
  display: flex;
  flex-grow: 1;
  overflow-x: hidden;
}

.tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: start;
  position: absolute;
  top: 0;
  right: 0;
  bottom: -0.85rem; // Makes the scrollbar appear underneath
  left: 0;
  overflow-x: auto;
}

.tab {
  background: #444;
  color: #FFF;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: 100%;
  text-align: center;
  padding: 0 1rem;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  margin-right: 0.5rem;
  position: relative;
  &:last-child {
margin-right: 0;
  }
}

.overlay {
  position: absolute;
  top: 100%;
  left: 0;
  height: 100px;
  padding: 1rem;
  background-color: black;
}

<div class="page">
  <div class="header">
<div class="items left-items">
  <button>Options</button>
  <button>New</button>
</div>
<div class="items scroll-super-wrapper">
  <div class="scroll-wrapper">
    <div class="tabs">
      <div class="tab">Tab 1</div>
      <div class="tab">Tab 2</div>
      <div class="tab">
        Tab 3
        <div class="overlay">
          Overlay content
        </div>
      </div>
      <div class="tab">Tab 4</div>
      <div class="tab">Tab 5</div>
      <div class="tab">Tab 6</div>
      <div class="tab">Tab 7</div>
      <div class="tab">Tab 8</div>
      <div class="tab">Tab 9</div>
      <div class="tab">Tab 10</div>
      <div class="tab">Tab 11</div>
    </div>
  </div>
</div>
<div class="items left-items">
  <button>Export</button>
  <button>Share</button>
</div>
  </div>
</div>

Stackoverflow 的代码 sn-ps 完全搞乱了格式。我在这里做了一个codepen：https://codepen.io/anon/pen/rXLZgN

是否可以在不使用 JavaScript 计算 x/y 坐标并制作元素 position: fixed 的情况下做到这一点？如果可能的话，我想只用 CSS 来做到这一点。

Answer 1

您将 tabs 类定义为相对于相对 scroll-super-wrapper 的绝对类 这意味着包装器将始终包含它。 因此，否则您将以不同的方式再次构建它。 或者你可以把你的overlay 类设置为position:fixed，它会从包装器的亲戚中取出（完全不推荐）；