[英]CSS position fixed causing overlapping of content
I'm making a static website, I fixed the navigation menu on the top as a fixed header section. 我正在制作一个静态网站,我将导航菜单固定在顶部为固定标题部分。
The problem is arising that whatever content I add next to it is overlapping on the top of the menu. 问题出在我旁边添加的任何内容都重叠在菜单顶部。
Adding a relative position to the content acts in the same way. 向内容添加相对位置的行为相同。
Setting position as absolute is obviously the only thing that works but then I will have to add a whole lot of margins and that will make the site too unstable. 将位置设置为绝对显然是唯一可行的方法,但随后我将不得不添加大量的边距,这将使站点过于不稳定。
This is my CSS for the menu and i don't have really anything in the main CSS due this problem. 这是我的菜单CSS,由于这个问题,我的主CSS中没有任何东西。
nav {
position: fixed;
top: 0;
background:none;
z-index:10000;
width:100%;
font-size:34px;
transition: all 0.5s;
}
nav.navScroll {
background: #013D5F;
font-size:20px;
transition: all 0.5s;
color: #fff;
}
img.logo {
float:left;
display:none;
transition: all 0.5s;
}
img.logoScroll {
display:inline;
width:50px;
padding:5px;
transition:all 0.5s;
}
div.menu {
text-align:center;
}
div.menuScroll {
float:right;
}
ul {
padding-left:0;
margin-left:0;
}
li.nav {
display:inline;
text-decoration:none;
padding-left:15px;
}
li.nav a {
list-style-type: none;
text-decoration:none;
color: white;
font-weight:400;
}
li.nav a:hover {
color: #FFD634;
transition: 1.2s;
}
.navScroll li.nav a {
color:#fff;
}
.navScroll li.nav a.selected {
color: #FFD634;
}
Jaromanda X correctly indicates that fixed position elements are taken out of flow. Jaromanda X正确指示固定位置元素已从流程中取出。 You must add a margin to the page body, or main container, equal to the height of your nav element. 您必须在页面正文或主容器中添加一个等于nav元素高度的边距。 Your 'z-index:10000;' 您的“ z-index:10000;” will prevent any scrolling elements from covering up your nav, provided nothing is given a higher z-index ;) 会阻止任何滚动元素掩盖您的导航,只要没有赋予更高的z-index;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.