Question

我正试图将div留在另一个div内的固定位置。包含的div是可滚动的，并且他的位置不会在屏幕中固定。

这是我到目前为止所获得的JSFiddle

滚动时，文本“固定文本”应保留在容器的右上角。为了模拟div的2个不同位置，我制作了2个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;
}

Answer 1

您可以overflow: auto使用items代替cont元素。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

创建额外的包装并将height和overflow应用于此 - 我添加了一个div inner，其中包含cont的所有内容并将其应用于此：

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

请参阅下面的演示了解我的意思：

.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>

Answer 3

将固定高度和溢出添加到.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>

{{1}}

修复了可滚动div中的div - 仅限CSS

3 个答案: