父母滾動時的位置絕對正確

Question

我希望​​元素保留在其父母（orange）容器的absolute right position中。但是如果使用水平滾動，它不起作用。我究竟做錯了什麼？如何保持​​元素總是在正確的位置？

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

Answer 2

我會用Flexbox的做到這一點。除非有其他原因，你想使用position: absolute;我會推薦這種方式。這也需要像Chetan的解決方案那樣的另一個div。
如果需要，Flexbox不像position: absolute;那樣受到瀏覽器的支持。

* { 
 
    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工作示例。