我想让我的顶部菜单保持在固定位置。我知道我必须使用 position:fixed 属性,但它不起作用。好像在我将 position:fixed top:0 放在 id topmenu 上之后,它与我的以下内容重叠。 在这里我把我的代码 这是我的网站 desawisataserang.com
HTML
<div id="topmenu">
<ul class="menu">
<li class="item-464 active"></li></ul>
<div id="search">
<div class="search">
</div>
</div>
</div>
CSS
#topmenu {
margin: auto;
width: 1000px;
padding-left: 0px;
font-family: :"Segoe UI", "Segoe WP", "Helvetica Neue", 'RobotoRegular', sans-serif; font-weight: 400;
font-size: 1.2em;
color: #fff;
background-color: #c02929;
overflow: auto;
}
#topmenu ul {
float: left;
padding: 18px;
padding-top: 0px;
padding-bottom: 0px;
margin: 0;
list-style: none;
background-color: #c02929;
}
#topmenu a {
display: block;
color: #fff;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 24px;
padding-right: 24px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-decoration:none;
text-transform: uppercase;
}
#topmenu a:hover {
color: #000;
text-decoration: none;
display:block;
background-color:#525252;
}
#topmenu li {
float: left;
}
#topmenu li:first-child {
border-left: 0px solid #000000;
}
最佳答案
当您给 position: fixed
时,在呈现页面上的其他元素时不会考虑元素呈现。你必须为你的 body 提供padding-top
,这样它就不会与标题重叠。
对于您的网站示例,请尝试以下操作:
#topmenu {
position: fixed;
width: 1000px;
z-index: 100;
overflow: none;
left: 50%;
margin-left: -500px;
}
关于html - 固定位置不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18246501/