即使在滾動頁面時也可以設置div全屏

我想設置#bodyHider全屏。我想這樣的代碼：即使在滾動頁面時也可以設置div全屏

#bodyHider{ 
    position:absolute; 
     width:100%; 
    height:100%; 
    background:#000; 
    opacity: 0.7; 
    filter: alpha(opacity=70); /* For IE8 and earlier */ 
    z-index:10000; 
}

的HTML代碼：

<div id="bodyHider"></div>

它的工作，但是當我向下滾動，我看到#bodyHider是在頁面的頂部。即使滾動頁面，我也想要整個屏幕。

來源

2016-01-23 Swister

如何只讓位置'fixed'和設置'頂部：0;左：0;'。這應該做到這一點。 –

這就是你想要的。

#bodyHider{ 
    position:fixed; 
    top:0; 
    width:100%; 
    height:100%; 
    background:#000; 
    opacity: 0.7; 
    filter: alpha(opacity=70); /* For IE8 and earlier */ 
    z-index:10000; 
}

來源

2016-01-23 13:57:55

感謝它的工作 – Swister

@Swister批准我的答案是很好的，所以大家都知道這很簡單。 –

一個小例子，與所述固定的位置。

CSS

html, body { 
height: 100%; 
width: 100%; max-width: 100%; 
} 
body { overflow-x: hidden; } 

#bodyHider{ 
    position:fixed;/* Put the position fixed */ 
    width:100%; 
    height:100%; 
    background:#000; 
    opacity: 0.7; 
    filter: alpha(opacity=70); /* For IE8 and earlier */ 
    z-index:-1; 
} 

#main { 
position:relative: 
height:auto; 
width:100%; 
z-index: 1; 
}

HTML

<body> 
<div id="bodyHider"></div> 
<div id="main"> 
Your content. 
</div> 
</body>

來源

2016-01-23 14:06:03

即使在滾動頁面時也可以設置div全屏

回答

相關問題