div全体を画面全体とコンテンツ全体でカバーすることができません

-2

私はdivをWebページの他のすべてのコンテンツとオーバーラップさせようとしています。固定されたnavbarです。つまり、ボタンをクリックするとページ全体をカバーするdivが現れます。コンテンツ全体をカバーしていますが、私が書いたコードでは、ナビゲーションバーをカバーすることができず、他のコンテンツも下に移動します。div全体を画面全体とコンテンツ全体でカバーすることができません

画像はバックグラウンドで表示されますが、 navbar.Hereは私のコードです：

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

私はクリックで画面全体をカバーして背景を表示するリンクを与えている第三の最後の行で10

出典

2017-03-29 aeshna

あなたはすべてをカバーするのdivをしたい場合は...

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

DIVなしでハイライトする方が簡単です。位置の絶対的なプロパティの z-indexは、あなたが望む場合よりも "高い"ものを決定します。

出典

2017-03-29 22:23:26

ありがとう – aeshna

div全体を画面全体とコンテンツ全体でカバーすることができません

答えて

関連する問題