Ẩn nội dung có thể cuộn đằng sau các vị trí cố định trong suốt khi di chuyển trang?

Question

Tôi có một div được gọi là tiêu đề được thiết lập với một vị trí cố định. Vấn đề là khi tôi cuộn trang nội dung của trang hiển thị phía sau tiêu đề (tiêu đề trong suốt).

Tôi biết rất nhiều về css, nhưng dường như không thể tìm ra điều này. Tôi đã thử thiết lập tràn để ẩn, nhưng tôi biết nó sẽ không hoạt động (và nó đã không).

Điều này rất khó giải thích, vì vậy tôi đã làm hết sức mình có thể.

html:

<div id="header"> 
    <div id="topmenu">Home | Find Feeds | Subscriptions</div> 
</div> 
<div id="container"> 
    <div id="content"> 
     testing 
    </div> 
</div> 

css:

#header { 
    margin:0 auto; 
    position: fixed; 
    width:100%; 
    z-index:1000; 
} 
#topmenu { 
    background-color:#0000FF; 
    height:24px; 
    filter: alpha(opacity=50); 
    opacity: 0.5; 
} 

#leftlinks { 
    padding: 4px; 
    padding-left: 10px; 
    float: left; 
} 

#rightlinks { 
    padding: 4px; 
    padding-right: 10px; 
    float: right; 
} 

#containerfixedtop { 
    width: 100%; 
    height: 20px; 
} 

#contentfixedtop { 
    margin: 0 auto; 
    background-color: #DAA520; 
    width: 960px; 
    height:20px; 
} 

#container { 
    position: relative; 
    top: 68px; 
    width: 100%; 
    height: 2000px; 
    overflow: auto; 
} 

#content { 
    margin: 0 auto; 
    background-color: #DAA520; 
    width: 960px; 
    height: 2000px; 
} 

Dưới đây là một ảnh chụp màn hình của vấn đề:

Answer 1

Bạn có thể tìm cho z-index. Nó cho phép bạn chỉ định thứ tự theo chiều dọc của các phần tử trên trang, do đó, một phần tử có z-index: 10 đang nổi phía trên (trực quan) một phần tử có z-index: 5.

Cung cấp nội dung z-index: 5 và xem nó có hoạt động hay không.

Answer 2

Có #header có chiều cao được đặt không?

#header {position: fixed; height: 100px; } 
#container {position: absolute; top: 100px; bottom: 0; overflow: auto; } 

Khá chắc chắn điều này sẽ không làm việc trong IE mặc dù ...

Answer 3

Tôi đã gặp một vấn đề tương tự, và tìm thấy một giải pháp cho trường hợp của tôi. Nó nên áp dụng cho dù bạn đang sử dụng một hình nền toàn màn hình, hoặc một màu (bao gồm cả màu trắng).

HTML

<div id="full-size-background"></div> 
<div id="header"> 
    <p>Some text that should be fixed to the top</p> 
</div> 
<div id="body-text"> 
    <p>Some text that should be scrollable</p> 
</div> 

CSS

#full-size-background { 
z-index:-1; 
background-image:url(image.jpg); 
background-position:fixed; 
position:fixed; 
top:0px; 
left:0px; 
width:100%; 
height:100%; 
} 
#header { 
position:fixed; 
background-image:url(image.jpg); 
height:150px; 
width:100%; 
} 
#body-text { 
margin-top:150px; 
} 

này mang lại cho tôi cái nhìn của một hình ảnh trang đầy đủ với một tiêu đề cố định trong suốt và khi cuộn nội dung cơ thể, nó ẩn đằng sau tiêu đề. Các hình ảnh xuất hiện liền mạch.

Bạn có thể làm điều tương tự với nền màu đồng nhất, tuy nhiên, được cho là sẽ dễ dàng hơn.

2 ghi chú: tiêu đề có chiều cao được đặt, tôi chỉ được thử nghiệm trong FF và Chrome.

Answer 4

Chỉ cần đến muộn, nhưng trong trường hợp bất cứ ai khác chạy qua điều này trong tương lai, đây là bản sửa lỗi của bạn.

Mã CSS của bạn:

.wrapper { 
    width:100%; 
    position:fixed; 
    z-index:10; 
    background:inherit; 
} 

.bottom-wrapper { 
    width:100%; 
    padding-top:92px; 
    z-index:5; 
    overflow:auto; 
} 

HTML của bạn:

<div class="wrapper"> 
    ...your header here... 
</div> 
<div class="bottom-wrapper"> 
    ...your main content here... 
</div> 

này sẽ cung cấp cho bạn với một tiêu đề mà sạch sẽ phù hợp với trang web của bạn, và nổi ở đầu trang. Nội dung chính sẽ cuộn tự do của tiêu đề và biến mất khi nó vượt qua tiêu đề. Phần đệm đầu tiên .bottom-wrapper của bạn phải là chiều cao của nội dung của trình bao bọc đầu trang của bạn.

Chúc mừng!

Answer 5

Chỉnh sửa vị trí của div nội dung bên dưới tiêu đề + overflow-y div nội dung.

Answer 6

1. Tôi đã cố định hình nền
2. Nền tiêu đề là minh bạch
3. Tôi không muốn nội dung của tôi để ghi đè lên tiêu đề minh bạch của tôi

tôi đã đưa ra một giải pháp di chuyển div thay vì nội dung:

<div> 
    <div class="header"></div> 
    <div class="content"></div> 
</div> 


.header { position: fixed; ... } 
.content { position: fixed; height: calc(100% - HEADER_HEIGHT); overflow: scroll; } 

Answer 7

Tôi nghĩ rằng điều này là muộn để trả lời. Nhưng sau đó, ai đó có một cái nhìn này sẽ rất hữu ích.

Chỉ cần thêm nền cho tiêu đề lớp

Đây là mã ->

#header { 
 
    margin:0 auto; 
 
    position: fixed; 
 
    width:100%; 
 
    z-index:999; 
 
    background-color:#FFFFFF; 
 
} 
 
#topmenu { 
 
    background-color:#0000FF; 
 
    height:24px; 
 
    filter: alpha(opacity=50); 
 
    opacity: 0.5; 
 
    
 
} 
 

 
#container { 
 
    position: relative; 
 
    top: 68px; 
 
    width: 100%; 
 
    height: 2000px; 
 
    overflow: auto; 
 
    z-index:1; 
 
} 
 

 
#content { 
 
    margin: 0 auto; 
 
    background-color: #DAA520; 
 
    width: 960px; 
 
    height: 2000px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 

 
<body> 
 

 
<div id="header"> 
 
    <div id="topmenu">Home | Find Feeds | Subscriptions</div> 
 
</div> 
 
<div id="container"> 
 
    <div id="content"> 
 
     testing 
 
    </div> 
 
</div> 
 
</body> 
 
</html>