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的代码段完全弄乱了格式。我在这里制作了一个Codepen：https://codepen.io/anon/pen/rXLZgN

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

Answer 1

您将tabs类定义为相对于scroll-super-wrapper的绝对类这意味着包装器将始终包含它。因此，否则您将以另一种方式重新构建它。或者您可以使用overlay类并对其进行设置position:fixed，它将把它从包装的相对对象中移除（完全不推荐）；

CSS水平滚动容器，其覆盖层在垂直方向上溢出

1 个答案: