定位元件下另一

我不是一个专家的网络开发，所以请在这里忍受我。定位元件下另一

我想显示一个页面的横幅样式标题，其顶部由275x116的图像占据，然后是横幅顶部70％出现的水平菜单栏（使用ul项目样式）。

我该如何设置，以便横幅出现在我的导航下方？目前，我的菜单栏左侧的一部分位于图像下面，但我想它是相反的，因此菜单栏上面的图片，有些事情是这样的：

============= <start of header> =========== 
    -------- 
    | img | 
    |  | 
    |  Horizontal menu 
    |  | 
    -------- 
    ============= <end of header> ===========

我的CSS：

#header 
{ 
    background-color: green;   
    border: 0; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    width: 100%;  
    height: 120px; 
} 

#logo 
{ 
    background: green url(images/logo.png) no-repeat scroll 0 0; 
    margin: 0px 0px; 
    border: 1px solid white;  
    left: 20px; 
    top: 20px; 
    width: 275px; 
    height: 116px; 
    position: absolute; 
    z-index: -1000; 
} 

.container { 
    border:1px solid grey; 
    margin-left:auto; 
    margin-right:auto; 
    width:960px; 
}

我的HTML：

<body> 

<div id="header"> 
    <div id="logo"> 
    </div> 

    <div class="container" id="primaryNavbar"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Books</a></li> 
     <li><a href="#">Shows</a></li> 
     <li><a href="#">Movies</a></li> 
    </ul>     

    <div class="clear">&nbsp;</div>     

    </div> <!-- end of container --> 

</div> <!-- end of header --> 
</body>

我认为，设置位置为“绝对”的标志元素，并添加在一个非常低的z-index将实现这一点，但认为并非如此这里。

有什么建议吗？

来源

2010-03-16 Cedar Jensen

附加这些项目现有的样式：

#header 
{ 
    position: relative; //this will keep your absolute items inside of this container 
} 

#logo 
{ 
    z-index: 1; 
} 

.container { 
    z-index: 2; 
    position: absolute; 
} 

.container ul li { 
    float: left; 
}

来源

2010-03-16 22:03:52

使.container浮动左边，相对位置并移动它，直到它在你需要它的地方。

来源

2010-03-16 22:00:04

定位元件下另一

回答

相关问题