css - 隐藏透明标题后面的页面内容

Question

我有一个固定的导航栏，它使用 flex 的带状图像，这些带状图像在实际带状物的上方和下方都有透明位，并且我有一个缩放的全尺寸背景(所以我无法在顶部制作一个具有匹配背景的导航栏)。我希望页面内容在用户滚动时消失在功能区后面，在导航栏的中间。

这两个问题是同一个问题，答案(很好)对我不起作用。

Hide scrollable content behind transparent fixed position divs when scrolling the page?

Hide Scrolling Content Under Transparent Header

这是我不想要的:

http://imageshack.us/photo/my-images/213/badnr.jpg/

这是我想要的，但没有滚动条:

http://imageshack.us/photo/my-images/534/scrolled.jpg/

在此先感谢您的帮助，非常感谢，这个网站已经并将继续教会我很多东西。

Answer 1

css z-index 属性应该可以将任何元素放在另一个元素的前面或后面。像这样:

<style type="text/css">
 body, html {
margin:0 auto;
padding:0;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
 }
/* Header Styling */
 #header {
color:#FFF;
background: url(/images/header-back.png) repeat-x;
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
z-index:1;
  }

#headerWrap {
width:1024px;
margin:0 auto;
height:50px;
}
/* Sub Header */
#subHeader {
position:fixed;
top:50px;
margin:0 auto;
z-index:1;
 }
 #subHeaderWrap {
height:30px;
width:830px;
border-bottom:thin solid #333;
background: url(../images/subheader.png) repeat-x;
  }
  /* Contaier */
  #container {
margin:0 auto;
width:1024px;   
min-height:600px;
   }
   #containerWrap {
margin-top:50px;

   }

   /* Menu */
  #sidebar {
float:left;
width:140px;
min-height:600px;
  }
  #content {
border-left:#333333 solid thin;
border-right:#333333 solid thin;
border-bottom:#333333 solid thin;
float:left;
width:830px;
min-height:600px;
padding-top:30px;
margin-bottom:10px;
  }
 #contentWrap {
width:830px;
margin:0 auto;
padding-bottom:10px;
 }
 </style>
<div id="container">
<div id="header" style="z-index:1;"/* Places div on top */">
This is transparent.
</div>

<div id="containerWrap">
    <div id="sidebar">
Menu Items Here
    </div>

<div id="content">
    <div id="contentWrap">

<div id="subHeader" style="z-index:1;"/* Places div on top */">
<div id="subHeaderWrap">
This div is transparent too, but is now on top.
</div>
</div>

Anything here is scrollable and will scroll under the divs above with z-index:1;


    </div>
</div>