我正在尝试在网页上设置固定的标题,即即使滚动时也应始终保持可见。请注意,我的页面是固定宽度(800px),并且在屏幕上水平居中。
我尝试过的
<header class="noselect" style="position:fixed; top:0px; height:70px;
background-color:#222D2D; margin:auto;">
<p>
<!-- header stuff goes here -->
</p>
</header>
<div class="separator clearfloat" style="position:fixed; top:71px; height:1px;">
</div>
分隔符是一条水平线,应贯穿屏幕的整个宽度,请参见页脚。
问题:
1.使用
position:fixed
还将其置于左= 0,而不是居中。2.分隔符不显示。
我可以通过将分隔符放置在标题中来使其可见,但是宽度限制为800px:
<header class="noselect" style="position:fixed; top:0px; height:70px;
background-color:#222D2D; margin:auto;">
<p>
<!-- header stuff goes here -->
</p>
<div class="separator clearfloat"></div>
</header>
测试页为here。
我该如何解决?
最佳答案
我会将父元素定位为固定的,将header
置于margin: 0 auto;
的中心
jsFiddle Demo
HTML:
<div id="top">
<header>Header</header>
</div>
<main>
<!-- Lots of content here. -->
</main>
CSS:
#top {
position: fixed;
left: 0; top: 0px; right: 0;
z-index: 1;
/* The below styling is here for illustrative purpose only. */
border-bottom: 1px solid #c1c1c1;
background: #fff;
opacity: 0.9;
}
#top header,
main {
width: 500px;
margin: 0px auto;
}
#top header {
height: 100px;
/* Border styling is here for illustrative purpose only. */
border-left: 1px dashed #c1c1c1;
border-right: 1px dashed #c1c1c1;
}
main { margin-top: 100px; /* Should be the same as '#top header' height. */ }
关于css - 如何在CSS中修复网页标题?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25501419/