[英]Css position fixed on header hides content
I am making a new website, and i have a problem with the header... I set the header's position to fixed, and that works but the content below the header is hidden. 我正在创建一个新的网站,我的标题有问题...我将标题的位置设置为固定,这样可行,但标题下面的内容是隐藏的。 I tried to move the content down with margin-top: 10px
, but all it did was move the header down. 我试图将内容向下移动到margin-top: 10px
,但它所做的就是将标题向下移动。
Link to jsfiddle: 链接到jsfiddle:
Give padding-top:58px;
给padding-top:58px;
to the .responsiveContainer
and add top:0;
到.responsiveContainer
并添加top:0;
to the .header
. 到.header
。
.responsiveContainer {
width: 100%;
// Add padding top
padding-top: 58px;
}
.header {
background-color: #000000;
padding: 10px;
padding-left: 0;
padding-right: 0;
box-shadow: 0 5px 0 #232323;
text-align: center;
width: 100%;
position: fixed;
// Add top 0
top: 0;
}
fixed 固定
Do not leave space for the element. 不要为元素留出空间。 Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. 相反,将其放置在相对于屏幕视口的指定位置,并且在滚动时不要移动它。 When printing, position it at that fixed position on every page. 打印时,将其放置在每页的固定位置。 This value always create a new stacking context. 此值始终创建新的堆叠上下文。
You need put the <div class="header">
inside of a div with defined height, like: 您需要将<div class="header">
放在具有已定义高度的div中,例如:
<div class="heightTest">
<div class="header">
<div class="navbar">
<ul>
...
</ul>
</div>
</div>
</div>
and css: 和css:
.heightTest{height:90px;}
Jsfiddle: http://jsfiddle.net/vwzhda41/2/ Jsfiddle: http : //jsfiddle.net/vwzhda41/2/
Try to use 尝试使用
padding-top: 58px;/*the height of the header*/`
instead of 代替
margin-top:10px;
/* Copyright © 2015 Dynavio */ /* Main Site Settings */ *, body { padding: 0; margin: 0; } body { background-color: #FFFFFF; } .responsiveContainer { width: 100%; } /* End Of Main Site Settings */ /* Header */ .header { background-color: #000000; padding: 10px; padding-left: 0; padding-right: 0; box-shadow: 0 5px 0 #232323; text-align: center; width: 100%; position: fixed; } .navbar { background-color: #131313; padding: 10px; } .navElem { display: inline; margin: -2px; } .navLink { text-decoration: none; padding: 10px; padding-top: 11px; color: #FFFFFF; font-family: SinkinSans; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .navLink:hover { background-color: #0044FF; box-shadow: 0 5px 0 #01268A; } .navLink:visited { color: #FFFFFF; } .active { background-color: #0044FF; box-shadow: 0 5px 0 #01268A; } /* End Of Header */ /* Site Content */ .startBox { background-color: #0044FF; position: relative; top: 50px; } /* End Of Site Content */ /* Alignment Classes */ .alignLeft { text-align: left; } /* End Of Alignment Classes */
<div class="responsiveContainer"> <div class="header"> <div class="navbar"> <ul> <li class="navElem"><a href="#" class="navLink active">Home Page</a> </li> <li class="navElem"><a href="#" class="navLink">Our Products</a> </li> <li class="navElem"><a href="#" class="navLink">Contact Us</a> </li> <li class="navElem"><a href="#" class="navLink">About Us</a> </li> </ul> </div> </div> <div class="startBox"> <p>dwddwwdwdd</p> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.