Question

我试图使网页的所有其他内容重叠，甚至是固定的导航栏，即当我点击一个按钮然后出现一个div，覆盖整个页面并覆盖整个内容。但是我有的代码写的，它无法覆盖导航栏，也无法覆盖其他内容

出现在背景中的图片，我希望它覆盖整个页面，即使是固定的导航栏。这是我的代码：

  <body  style=" background-color: black"  onload="countview()" >
        <div class="main" style="height:100vh;display: none;text-align: center;background-image: url(hmk1.jpg);" id="main">
            <h1>Livie</h1>
            <a href="#" class=" glyphicon glyphicon-tag">WHAT WE DO</a>
            <a href="#" class=" glyphicon glyphicon-tag">SIGNUP FOR NEWSLETTER</a>
            <a href="#" class=" glyphicon glyphicon-tag">PRIVACY POLICY</a>
            <a href="#" class=" glyphicon glyphicon-tag">TERMS AND CONDITIONS</a>
            <a href="#" class=" glyphicon glyphicon-tag">FAQS</a>
            <a href="#" class=" glyphicon glyphicon-tag">CONTACT US</a>
            <a href="#" class=" glyphicon glyphicon-remove" onclick="document.getElementById('main').style.display='none'"></a>
          </div>
         <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="height:120px">
         <div style="clear: both;">
         <h1  style="cursor:pointer"><a href="#" class=" glyphicon glyphicon-link" onclick="v();"></a> Welcome to Livie</h1> 
   </nav>

在第三行中，我给出了一个链接，点击它将显示覆盖整个屏幕的背景

Answer 1

如果你想要一个能涵盖一切的div ......

＆＃13;

#COVER_EVERYTHING{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.1);
z-index: 9999;
}

＆＃13;

<div id="COVER_EVERYTHING"></div>
<p>Some text</p>
<h1>Some more text</h1>
<span>LOL</span>

＆＃13;

#COVER_EVERYTHING{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.1);
z-index: 9999;
}

＆＃13;

<!--<div id="COVER_EVERYTHING"></div>
and without....
-->
<p>Some text</p>
<h1>Some more text</h1>
<span>LOL</span>

＆＃13;

＆＃13; 请注意，没有DIV，它更容易突出显示。位置绝对属性的z-index确定它将是什么＆＃34;更高＆＃34;比如果你愿意的话。

无法使div覆盖整个屏幕和整个内容

1 个答案: