Phần tử vị trí CSS "cố định" bên trong hộp chứa cuộn

Question

tôi tự hỏi liệu có ai đã tìm ra giải pháp cho việc này không?

tôi đang tìm kiếm một giải pháp để đính kèm một yếu tố để phía trên cùng của một container di chuyển

HTML:

<div class="container"> 
    <div class="header">title</div> 
    <div class="element">......</div> 
    ... (about 10-20 elements) ... 
    <div class="element">......</div> 
</div> 

tất cả các "yếu tố" có position:relative,

container có sau CSS:

.container { 
    position:relative; 
    width:200px; 
    height:400px; 
    overflow-y:scroll; 
} 

tôi muốn tiêu đề nằm trên đầu trang o f container, độc lập với vị trí di chuyển của nó và các phần tử cuộn bên dưới.

CSS cho đến nay:

.header { 
    position:absolute; /* scrolling out of view :-(*/ 
    z-index:2; 
    background-color:#fff; 
} 
.element{ 
    position: relative; 
} 

tất cả các yếu tố này là yếu tố khối, và tôi không thể di chuyển tiêu đề bên ngoài của container. jquery không có tùy chọn tại thời điểm này.

Answer 1

Giải pháp trong trường hợp này sẽ được bật danh hiệu bên ngoài của phần tử di chuyển:

<div class="header">title</div> 
<div class="container"> 
    <div class="element">......</div> 
    <div class="element">......</div> 
</div> 

Mặc dù có lẽ bạn nên có những yếu tố ngữ nghĩa tốt hơn nếu có thể (chỉ đoán ở đây):

<h3>title</h3> 
<ul> 
    <li>......</li> 
    <li>......</li> 
</ul> 

Answer 2

Giao diện người dùng jQuery đã thêm phương thức tiện ích position() chỉ nhằm mục đích này giúp cuộc sống của bạn dễ dàng hơn.

$("#someElement").position({ 
    of: //Element to position against, 
    my: //which position on the element being positioned, 
    at: //which position on the target element eg: horizontal/vertical, 
    offset: // left-top values to the calculated position, eg. "50 50" 
}); 

Chắc chắn đã giúp tôi.

Answer 3

Tôi cho rằng giải pháp của bạn đã vượt qua với position:sticky. Dường như nó giống như position:fixed nhưng tôn trọng vị trí tương đối với cha mẹ của mình.

Rất tiếc, đây là tính năng thử nghiệm và chỉ được hỗ trợ trong Chromium. Bạn có thể xem thêm chi tiết trong this test page.

Giải pháp css thuần túy xuất hiện trong đầu tôi là thay đổi nhỏ về đánh dấu. Bạn chỉ có thể đặt vùng chứa cho "phần tử" như sau:

<div class="cont_elements"> 
     <div class="element">......</div> 
     ..... 
</div> 

Và cung cấp cho tràn vào thùng chứa bên trong này. Bây giờ, tiêu đề của bạn ở trên đầu.

Here's a working demo.