スクロール可能div内の固定div - CSSのみ

Question

divを別のdiv内の固定位置に置こうとしています。含まれているdivはスクロール可能で、彼の位置は画面に固定されていません。

これは私がスクロール時にテキスト「固定テキストは、」コンテナの右上隅にとどまるべきJSFiddle

これまでに得たものです。 divの2つの異なる場所をシミュレートするためにdivの2つのコピーを作成し、同じクラスを維持しました。

CSSでのみ行うことはできますか？そのよう.itemsスクロールの代わりに、.cont

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

は、代わりに.itemsに固定の高さとオーバーフローを追加し、それがあるためです.txtは、滞在しますそれは.contおよび.contに対して位置付けられています。isn ' tスクロールする。

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

Answer 2

は余分ラッパーを作成し、それにheightとoverflowを適用する - 私はcontのすべての内容を包むDIV innerを追加して、それにこれを適用：

.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

あなたはcont要素の代わりにitemsにoverflow: autoを使用することができます。

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

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