Css 是否可以使用最大宽度的固定收割台?

Css 是否可以使用最大宽度的固定收割台?,css,responsive-design,css-position,Css,Responsive Design,Css Position,我在站点顶部有一个居中的标题div;它当前不是固定的,并且有一个最大宽度设置,因此它是有上限的和响应的。这真的很容易做到;您只需设置最大宽度并使用边距将其居中 我的客户现在希望在向下滚动时将标题固定在页面顶部。如何保持中心最大宽度(封顶和响应)并使其固定?您需要这样的东西吗 HTML <div class='fixed-top'> <h1 align='center'>Example Fixed Top Header</h1> </div>

我在站点顶部有一个居中的标题div;它当前不是固定的,并且有一个最大宽度设置,因此它是有上限的和响应的。这真的很容易做到;您只需设置最大宽度并使用边距将其居中


我的客户现在希望在向下滚动时将标题固定在页面顶部。如何保持中心最大宽度(封顶和响应)并使其固定?

您需要这样的东西吗

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>

使用固定位置,将顶部、左侧、右侧设置为0。然后使用左边距/右边距自动。添加100%宽度并应用最大宽度。别忘了一个大的z指数

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

您可以使用
位置:固定,将标题粘贴在页面顶部和<代码>顶部:0


您可以将位置设置为固定,将顶部、左侧和右侧设置为0。将边距和填充设置为0。同时将z指数设得高一些,这样它就一直在顶部。这不是更像宽度:100%吗?我想要最大宽度:900px,这样宽度就有上限了。然后不要设置左或右值。将“最大宽度”设置为900,将“左/右边距”设置为“自动”。非常接近,但我需要蓝色部分与车身边距保持一致,因为我需要蓝色边缘始终与绿色边缘对齐。@Ryan这能解决您的问题吗?基本上,将导航栏和内容设置为具有相同的页边空白。@GibboK谢谢您帮我查看。不,不是这样。我指的是左右边距。我只需要蓝色像绿色一样远离左右边距。我需要蓝色的标题像文本一样贴在左右边距上。谢谢你看这个。我想澄清一下。当浏览器的宽度小于“最大宽度”时,我需要将蓝色标题粘贴到左右边距上。查看页眉如何进入左右边距?当浏览器的宽度大于“最大宽度”时,它将按我希望的方式工作。
.navbar {
    position: fixed;
    top: 0;
    z-index: 1000;
    max-width: 900px;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#header {
    top: 0;
    position: fixed;
    left:0;
    max-width: 500px;
    height: 50px;
    background-color: blue;
}
#content {
    height: 1800px;
}