html - 当 parent 有滚动条时，位置绝对正确

Question

我希望 green 元素保持在其父容器(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

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

但是有一件事是我手动降低了绿色条的高度使其不与水平滚动条重叠，可能需要再看一遍。

* {
      box-sizing: border-box;
    }

    .outer-main{
      display: inline-block;
      position: relative;
    }

    .outer {
      position: relative;
      padding: 10px;
      border: solid 1px black;
      background-color: orange;
      width: 400px;
      height: 200px;
      overflow-x: scroll;
      overflow-y: hidden;
    }

    .stay-right {
      position: absolute;
      right: -19px;
      top: 0px;
      border: solid 1px black;
      background-color: green;
      width: 20px;
      height:100%;
      z-index: 1
    }

    .inner {
      width: 600px;
    }

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