在滾動頁面時，隱藏透明固定位置div後面的可滾動內容？

我有一個叫做頭的div，它是用一個固定的位置設置的。問題是當我滾動頁面時，頁面內容顯示在頁眉後面（頁眉是透明的）。在滾動頁面時，隱藏透明固定位置div後面的可滾動內容？

我對css有很多瞭解，但似乎無法想象這一個。我試圖設置溢出隱藏，但我知道它不會工作（並沒有）。

這是很難解釋，所以我盡我所能。

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

這裏的問題的截圖：

enter image description here

來源

2011-06-30 mtlca401

你可以得到問題的屏幕截圖？ – Nightfirecat

你可以添加CSS和HTML嗎？ – yoel

@ mtlca401：你有沒有找到最終解決方案？我有類似的問題 –

您可能正在尋找z-index。它允許您指定頁面上元素的垂直順序，因此具有z-index: 10的元素浮動在（視覺上）具有z-index: 5的元素上方。

給內容z-index: 5看看它是否有效。

來源

2011-06-30 02:48:50 Blender

這隻會是真實的，如果我爲標題div設置背景（無論是彩色圖像還是實心圖像）。我的標題div是透明的。我的標題div的z-index設置爲1000.當我滾動頁面時，可滾動內容仍顯示在標題後面。 – mtlca401

使內容的「z-index」高於標題的內容。你能發佈你的問題的截圖嗎？我看不到它。 – Blender

如何上傳圖片？我沒有看到這個選項。 – mtlca401

#header是否有固定高度？

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

很肯定這不會在IE工作，雖然...

來源

2011-06-30 03:23:01 asymptote

它沒有固定的高度，但我嘗試了一個固定的高度，仍然是一樣的東西（可能不是你爲什麼要問）。 IE我不在乎它是否有效。我不支持它（也許IE 9和10）。 – mtlca401

http://jsbin.com/omulis - 這是您尋找的效果嗎？ – asymptote

@ jsbin.com/omulis - 我期待的效果是滾動的內容不會顯示在標題後面。現在它（橙色部分）出現在標題後面。圖像的紫色部分是橙色與藍色混合的結果。標題是透明的藍色。橙色部分是內容。 – mtlca401

我有一個類似的問題，並找到了我的情況的解決方案。無論您是使用全屏幕背景圖像還是純色（包括白色），它都應該適用。

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

這給了我一個完整的頁面圖像與透明固定頭部，當主體內容滾動，它隱藏在標題的後面看。圖像顯示無縫。

雖然可以用純色背景做同樣的事情，但可以說，它會更容易。

2筆記：標頭有一個高度，我只在FF和Chrome上測試過。

來源

2012-04-27 15:28:20

剛來這麼晚，但如果其他人在未來遇到這種情況，這是您的修復。

你的CSS代碼：

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

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

你的HTML：

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

這將爲您提供一個標題是乾淨匹配您的網站，並在上面漂浮。主要內容將自由滾動標題，並在通過標題時消失。你的.bottom-wrapper padding-top應該是你的頭文件內容的高度。

乾杯！

來源

2012-05-16 04:27:48 Martin

這沒有解決他關於隱藏透明包裝/ div的問題， –

我有類似的問題，並試圖把這個，但我仍然得到相同的結果...頂部仍然是透明的 – user2061886

修復內容div在標題下方的位置+ overflow-y內容div。

來源

2013-09-06 18:25:08 takrishna

我有固定的背景圖像
頭背景是透明的
我不希望我的內容覆蓋我的頭透明

我想出了一個解決方案滾動股利，而不是身體：

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


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

來源

2016-11-17 16:40:24

我認爲這是遲來的答案。但後來，有人看看這會有所幫助。

只需添加背景頭類

這裏是代碼 - >

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

來源

2017-06-17 08:44:37

在滾動頁面時，隱藏透明固定位置div後面的可滾動內容？

回答

相關問題