z索引和定位

我创建的报头，其是蓝色杆，它高40像素并且跨越所述浏览器的100％。它是静态的。z索引和定位

根据该（如在由静态蓝色条半隐半现）我要位置的图像，但需要在图像浏览器为中心。也必须是静态的。

然后在这两个的顶部我有报头的内容。

的问题是：

当添加任何类型的位置指令的蓝条是不固定的。不管z-index设置如何，图像总是位于蓝色条的顶部。页面顶部有一个空白处，而不是蓝色栏，而是图片和标题内容。

这里有我想要的CSS：

#topbar { 
width:100%; 
height:42px; 
margin:0; 
padding:0; 
background: #0066cc; 
/* make top bar stick to the top of browser */ 
position:fixed; 
z-index:800; 
/*Making sure it sticks to left of window in IE7*/ 
top:0; 
left:0; 
float:left; 
-webkit-box-shadow: 0 8px 6px -6px #666; 
    -moz-box-shadow: 0 8px 6px -6px #666; 
    box-shadow: 0 8px 6px -6px #666; 
position:absolute; /* if I remove this it sticks but still same other problems */ 
} 

#top_blur { 
width:940px; 
margin:0 auto; 
height:70px; 
z-index:1; 
background-image: url('/images_/backgrounds/top_blur.png'); 
background-repeat: no-repeat; 
position:relative; 
} 

.header { 
width:940px; 
margin:0 auto; 
}

，并正与烧成：

<div id="topbar"> 
<div id="top_blur"> 
<div class="header">content here</div></div></div>

来源

2012-02-15 Darren Sweeney

.header和#top_blur是儿童或#topbar的decendents所以他们将永远是最佳。有关更多详细信息，请参阅此https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context。分开div可以让你重叠它们。

这拨弄可能会有帮助：http://jsfiddle.net/zagc6/

来源

2012-02-15 17:39:18

非常感谢，我已经改变了所有poisitons固定，现在他们留在顶部，他们应该 - 在那里有这样做的任何进一步的后果？ – 2012-02-15 18:07:05

不是我所知道的，但也可能取决于其余的布局和设计。没有与此处描述的z-index的顺序一个跨浏览器的问题http://timkadlec.com/2008/01/detailed-look-at-stacking-in-css/当然http://stackoverflow.com/questions/672228 /即-6-即-7- z索引-问题 – 2012-02-15 18:12:12

z索引和定位

回答

相关问题