Question

我在网站顶部有一个居中的标题div;它目前尚未修复，并且设置了最大宽度，因此它具有上限和响应性。这很容易做到;你只需设置最大宽度并使用边距使其居中。

我的客户端现在希望在向下滚动时将标题固定到页面顶部。如何保持居中的最大宽度（上限和响应）并使其固定？

Answer 1

您可以使用position:fixed;和top:0;

将标题贴在页面顶部

#header {
    top: 0;
    position: fixed;
    left:0;
    max-width: 500px;
    height: 50px;
    background-color: blue;
}
#content {
    height: 1800px;
}

Answer 2

你需要这样的东西吗？

HTML

<div class='fixed-top'>
    <h1 align='center'>Example Fixed Top Header</h1>
</div>
<div class='container'>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>

CSS

.fixed-top {
    left: 0;
    margin: 0 auto;
    max-width: 200px;
    position: fixed;
    right: 0;

    background-color: blue;
   }
.container{
    padding-top:200px;
 height: 1800px;   
}

http://jsfiddle.net/grk6petn/

Answer 3

使用固定为top，left，right的位置设置为0.然后使用margin left / right auto。添加100％宽度并应用最大宽度。不要忘记一个大的z指数。

.navbar {
    position: fixed;
    top: 0;
    z-index: 1000;
    max-width: 900px;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

http://jsfiddle.net/pa2xxxjn/1/

是否可以使用最大宽度进行固定标题？

3 个答案: