固定在可滚动div内的div - 仅使用CSS

Question

我想让一个 div 在另一个 div 内部保持固定位置。包含的 div 是可滚动的，他的位置不是固定在屏幕上。

这是我目前的代码 JSFiddle

文本“fixed text”应该在滚动时停留在容器的右上角。 我复制了 div 并保持相同的 class，以模拟 div 的两个不同位置。

是否可以仅使用 CSS 完成？

HTML

<div class="cont">
  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="txt">
    fixed text
  </div>
</div>

<div class="cont">
  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="txt">
    fixed text
  </div>
</div>

CSS

.cont{
  width: 400px;
  height: 130px;
  border: 1px solid black;
  margin: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
}

.items{
  width: 600px;
}

.item{
  width: 80px;
  height: 80px;
  background-color: blue;
  margin-top: 22px;
  margin-left: 3px;
  display: inline-block;
}

.txt{
  position: absolute;
  top: 2px;
  right: 10px;
}

- Itay Gal

Answer 1

您可以在items上使用overflow: auto，而不是在cont元素上使用。

.cont {
  width: 400px;
  height: 130px;
  border: 1px solid black;
  margin: 10px;
  overflow-x: hidden;
  position: relative;
}
.items {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.item {
  width: 80px;
  height: 80px;
  background-color: blue;
  margin-top: 22px;
  margin-left: 3px;
  display: inline-block;
}
.txt {
  position: absolute;
  top: 2px;
  right: 10px;
}

<div class="cont">
  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="txt">
    fixed text
  </div>
</div>

- Nenad Vracar

---

不错的解决方案。这只是我问题的简化示例。我需要检查它是否不会影响其他元素。 - Itay Gal

Answer 2

创建一个额外的包装器，对其应用height和overflow - 我已经添加了一个

inner

来包装cont的所有内容，并将其应用于其中：

.inner {
  overflow-x: scroll;
  overflow-y: hidden;
  height: inherit;
}

请看下面的演示以了解我的意思：

See demo below to see what I mean:

.cont {
  width: 400px;
  height: 130px;
  border: 1px solid black;
  margin: 10px;
  /*overflow-x: auto;*/
  /*overflow-y: hidden;*/
  position: relative;
}
.items {
  width: 600px;
}
.item {
  width: 80px;
  height: 80px;
  background-color: blue;
  margin-top: 22px;
  margin-left: 3px;
  display: inline-block;
}
.txt {
  position: absolute;
  top: 2px;
  right: 10px;
}
.inner {
  overflow-x: scroll;
  overflow-y: hidden;
  height: inherit;
}

<div class="cont">
  <div class="inner">
    <div class="items">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="txt">
      fixed text
    </div>
  </div>
</div>

- kukkuz

---

正如我对Nenad所评论的，这只是我的问题的一个简化示例。我必须检查它是否影响了其他元素。 - Itay Gal

Answer 3

将固定高度和overflow添加到.items中，以便.items滚动而不是.cont，而txt将保持在原位，因为它相对于.cont和.cont的位置不会滚动。

.cont{
  width: 400px;
  border: 1px solid black;
  margin: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
}

.items{
  width: 600px;
  height: 130px;
  overflow: scroll;
}

.item{
  width: 80px;
  height: 80px;
  background-color: blue;
  margin-top: 22px;
  margin-left: 3px;
  display: inline-block;
}

.txt{
  position: absolute;
  top: 2px;
  right: 10px;
}

<div class="cont">
  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="txt">
    fixed text
  </div>
</div>

<div class="cont">
  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="txt">
    fixed text
  </div>
</div>

- Michael Coker