스크롤 가능한 div 안의 고정 된 div - CSS 만

Question

다른 div의 고정 된 위치에 div를 유지하려고합니다. 포함 된 div는 스크롤 가능하며 그의 위치는 화면에 고정되어 있지 않습니다. 이것은 내가 지금까지 JSFiddle

텍스트 가지고 무엇을

"고정 텍스트"스크롤 할 때 컨테이너의 오른쪽 상단에 숙박한다. div의 2 개의 복사본을 만들었고 div의 두 개의 다른 위치를 시뮬레이트하기 위해 동일한 클래스를 유지했습니다.

CSS로만 가능합니까? 그 이후입니다 .items 스크롤 대신 .cont 및 .txt 머물 수 있도록

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에 고정 높이와 오버 플로우를 추가 이 값은 .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의 모든 내용을 포장 사업부 inner을 추가하고이 적용 :

.inner { 
    overflow-x: scroll; 
    overflow-y: hidden; 
    height: inherit; 
} 

내 뜻을 보려면 아래에서 데모를보십시오.

,451,515,

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