Question

我使用此类跟随固定的顶部标题：

[ZoneTransfer]
ZoneId=3

现在，我想要一个固定的宽度.sticky { position: fixed; width: 100%; left: 0; top: 0; z-index: 100; border-top: 0; }，而不是100％并且居中，如JSFiddle example所示。

Answer 1

您可以使用transform: translateX(-50%) - （demo on JSFiddle）：

来使用动态解决方案

.sticky {
    left:50%;
    position:fixed;
    top:0;
    transform:translate(-50%);
    width:840px;
    z-index:100;
}

我不建议使用静态解决方案，但您也可以使用它（demo on JSFiddle）：

.sticky {
    left:calc(50% - 420px);
    position:fixed;
    top:0;
    width:840px;
    z-index:100;
}

为什么要避免使用静态解决方案？

您可以定义许多这样的项目来设置这些项目的位置，但如果您将来更改宽度，则还必须更改CSS定义的静态部分。你不能完全避免在CSS上使用静态部分，但你可以最小化它们！

Answer 2

.sticky {
    position: fixed;
    width: 840px;
    margin-left: -420px
    left: 50%;
    top: 0;
    z-index: 100;
    border-top: 0;
}

这是解决方案。

Answer 3

你试过这样的事吗？

HTML：

 <div class="sticky-container">
    <div class="nav sticky">
      Navigation
    </div>
  </div>

CSS：

.sticky-container {
    position: fixed;
    width: 840px;
    left: 50%;
    top: 0;
    z-index: 100;
    border-top: 0;
}
.sticky {
  position:relative;
  left:-50%;
  top:0;
}

Answer 4

如果您将.sticky类更改为以下内容：

.sticky {
  margin:auto;
    width: 840px;
    z-index: 100;
    border-top: 0;
}

并删除正文上方的上边距：

body {
    margin: 0 0 0 0 !important;
    padding: 0; 
}

CSS：如何创建具有固定宽度的固定顶部标题

4 个答案: