将页面内容隐藏在透明标题后面 [英] Hide page content behind transparent header

问题描述

我有一个固定的导航栏，该导航栏使用弯曲的带状图像，在实际带状区域的上方和下方具有透明位，并且具有缩放的全尺寸背景(因此，我无法在顶部设置一个具有匹配背景的导航栏).我希望页面内容在用户滚动时在导航栏的中间消失在功能区的后面.

I have a fixed navbar using curved ribbon images that have transparent bits above and below the actual ribbon and I have a scaling full size background (so I can't make a navbar with a matching background at the top). I would like the page content to disappear behind the ribbon, halfway through the navbar as the user is scrolling.

这是与这两个问题相同的问题，答案(很好)对我不起作用.

It's the same problem as these two questions and the answers (which are good) aren't working for me.

在透明固定位置后隐藏可滚动内容滚动页面时是否使用div?

在透明标题下隐藏滚动内容

这是我不想要的:

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

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

This is kind of what I want but without the scrollbars:

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

在此先感谢您的帮助，非常感谢，该站点已经并且将继续给我带来很多启发.

Thanks in advance for any help, it's greatly appreciated, this site has and will continue to teach me a lot.

推荐答案

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

The css z-index attribute should do the trick to place any element in front of or behind another element. Like so:

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

这篇关于将页面内容隐藏在透明标题后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！