gpt4 book ai didi

html - 将元素定位在另一个之下

转载 作者:可可西里 更新时间:2023-11-01 12:54:04 26 4
gpt4 key购买 nike

我不是网络开发专家,所以请多多包涵。

我想为一个页面显示横幅样式标题,顶部由 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>

我认为将 Logo 元素的位置设置为“绝对”并添加非常低的 z-index 可以实现此目的,但此处并非如此。

有什么建议吗?

最佳答案

将这些元素附加到您现有的样式:

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

关于html - 将元素定位在另一个之下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2458446/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com