Question

我想全屏设置#bodyHider。我试过这段代码：

#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位于页面顶部。即使我滚动页面，我也想要整个屏幕。

Answer 1

这就是你想要的。

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

Answer 2

一个小例子，固定位置。

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

即使在滚动页面时也设置div全屏

2 个答案: