如何隱藏與滾動

transaparent背景後面的div頁面內容，我有以下的標記爲我做了一個Plunkr：如何隱藏與滾動

<body> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-12"> 
     <nav class="navbar navbar-fixed-top"> 
      <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand">MY SITE</a> 
      </div> 
      </div> 
     </nav> 
     </div> 
    </div> 
    <div class="row site-content"> 
     <div class="col-sm-2"> 
     <div class="main-nav"> 
      <div class="navbar"> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav nav-stacked"> 
       <li><a>Link 1</a></li> 
       <li><a>Link 2</a></li> 
       <li><a>Link 3</a></li> 
       </ul> 
      </div> 
      </div> 
     </div> 

     </div> 
     <div class="col-sm-10 body-content"> 
     <!-- Lots of stuff --> 
     </div> 
    </div> 
    </div> 
</body>

我需要有導航欄和navmenu固定的，但的內容滾動時頁面應隱藏在導航欄後面。

如果存在背景圖像，如何隱藏導航欄後面的內容？

來源

2017-04-20 im1dermike

使用'position：relative'和'z-index：（whatever）'？ – Red

@RichardMauritz在哪個元素上？ – im1dermike

您希望內容被隱藏在背後的'元素' – Red

當您使用inherit它將繼承父元素屬性，因此您首先需要設置標題使用與您的身體相同的背景圖像，因爲您沒有從標題的容器繼承背景圖像或顏色。其次，您需要爲頁眉定位一個位置屬性，以便將其「修復」到頁面的頂部。在你的情況下，它看起來像你想使用fixed位置。

這是updated plunker

來源

2017-04-20 15:17:31

如何隱藏與滾動

回答

相關問題