Question

我不是专家网络开发者，所以请在这里跟我说。

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

我如何设置它以便横幅显示在导航下方？目前，菜单栏左侧的一部分位于图像下方，但我希望它相反，所以菜单栏位于图像上方，有点像这样：

   ============= <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就可以实现这一目标，但这不是这种情况。

有什么建议吗？

Answer 1

将这些项目附加到现有样式：

#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;
}

Answer 2

让.container向左浮动，相对位置并移动它直到它需要它。

定位元素在另一个下面

2 个答案: