親がスクロールしているときに絶対位置を設定する

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

私はフレキシボックスを使用してこれを行うだろう。 position: absolute;を使用したい他の理由がない限り、私はその方法をお勧めします。これにはChetanのソリューションのような別の部門も必要です。それが要件である場合
フレキシボックスは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です。