Question

我希望green元素保留在其父（absolute right position）容器的orange处。但如果使用水平滚动它不起作用。我究竟做错了什么？如何使green元素始终保持在正确的位置？

* {
  box-sizing: border-box;
}

.outer {
  position: relative;
  padding: 10px;
  border: solid 1px black;
  background-color: orange;
  width: 400px;
  height: 200px;
  overflow: scroll;
}

.stay-right {
  position: absolute;
  right: 0px;
  top: 0px;
  border: solid 1px black;
  background-color: green;
  width: 20px;
  height: 100%;
}

.inner {
  width: 600px;
}

<div class="outer">
    <div class="stay-right"></div>
    <div class="inner">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
</div>

Answer 1

您需要另一个容器，其中绿色条将位于滚动容器之外。

然而有一件事是我手动将绿色条的高度减少到不在水平滚动条上重叠，可能需要再次查看它。

＆＃13;

  <div class="outer-main">
    <div class="stay-right"></div>
    <div class="outer">
      <div class="inner">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
      </div>
    </div>
  </div>

＆＃13;

import { Observable } from 'rxjs';

＆＃13;

Answer 2

我会使用flexbox来做到这一点。除非您有其他原因要使用position: absolute;，否则我会推荐这种方式。这还需要像Chetan的解决方案那样的另一个div 如果需要，position: absolute;的浏览器不支持Flexbox。

* {
  box-sizing: border-box;
}

.outer {
  position: relative;
  border: solid 1px black;
  background-color: orange;
  width: 400px;
  height: 200px;
  overflow: scroll;
  display: flex;
  flex-direction: horizontal;
}

.stay-right {
  border: solid 1px black;
  background-color: green;
  width: 20px;
  height: 100%;
  flex-shrink: 0;
}

.inner {
  padding: 10px;
  overflow: scroll;
}

.inner-text {
  width: 600px;
}

<div class="outer">
    <div class="inner">
      <div class="inner-text">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
    <div class="stay-right"></div>
</div>

Answer 3

您需要在文字之外放置滚动条。这是一个例子：

CSS

.parent-to-position-by {
    position: relative;
}

.scrolling-contents {
    display: inline-block;
    width: 400px;
    height: 200px;
    line-height: 20px;
    background-color: #CCC;
    overflow: scroll;
}

.scrolling-inner{
  min-width: 600px;
}

.fixed-elements {
  width: 400px;
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  background: orange;
}

.fixed {
    position: absolute; /* effectively fixed */
    top: 0;
    right: 100%;
    background-color: #F00;
    width: 20px;
    height: 200px;
}

HTML

<div class="parent-to-position-by">
  <div class="fixed-elements">
      <div class="fixed">
      </div>
  </div>
  <div class="scrolling-contents">
    <div class="scrolling-inner">
      <p>Lorem ipsum dolor sit amet</p>
    </div>
  </div>
</div>

以下是plunkr工作示例。

当父级滚动时，位置绝对正确

3 个答案: