如何隐藏与滚动

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

如何隐藏与滚动

回答

相关问题