2017-03-29 12 views
-2

Ich versuche, eine div überlappen alle anderen Inhalte der Webseite auch die feste navbar, dh wenn ich auf eine Schaltfläche klicken, dann erscheint ein div, das die gesamte Seite und deckt deckt den gesamten Inhalt.Aber mit dem Code, den ich geschrieben habe, ist es nicht möglich, die Navigationsleiste zu decken und auch die anderen Inhalte verschiebennicht div decken den gesamten Bildschirm und den gesamten Inhalt

Das Bild, das im Hintergrund erscheint, ich will es die gesamte Seite sogar die feste abdecken navbar.Here ist mein Code:

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

In der drittletzten Zeile i den Link gegeben haben, auf klicken, die den Hintergrund wird angezeigt, die

Antwort

1

gesamten Bildschirm abdeckt Wenn Sie ein div wollen, dass alles abdecken ...

#COVER_EVERYTHING{ 
 
width: 100%; 
 
height: 100%; 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
background: rgba(0,0,0,0.1); 
 
z-index: 9999; 
 
}
<div id="COVER_EVERYTHING"></div> 
 
<p>Some text</p> 
 
<h1>Some more text</h1> 
 
<span>LOL</span>

#COVER_EVERYTHING{ 
 
width: 100%; 
 
height: 100%; 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
background: rgba(0,0,0,0.1); 
 
z-index: 9999; 
 
}
<!--<div id="COVER_EVERYTHING"></div> 
 
and without.... 
 
--> 
 
<p>Some text</p> 
 
<h1>Some more text</h1> 
 
<span>LOL</span>
Hinweis, ist es einfacher, ohne das DIV zu markieren. Die z-index auf einer Position absolute Eigenschaft bestimmt, was es "höher" als wenn Sie werden.

+0

vielen Dank – aeshna

Verwandte Themen