CSS: как создать фиксированный верхний заголовок с фиксированной шириной

#css

Вопрос:

У меня есть следующий фиксированный верхний заголовок, использующий этот класс:

 .sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
}

Теперь я хотел бы иметь фиксированную ширину 840px , а не 100% и центрированную, как показано в этом примере JSFiddle .

1. С помощью чего вы хотите исправить исправленное? Заголовок или содержимое?

2. Установка фиксированных размеров пикселей обычно приводит к очень низкой производительности на разных экранах и устройствах. Относительный размер намного лучше.

Ответ №1:

Вы можете использовать динамическое решение, используя transform: translateX(-50%) — (демо на JSFiddle):

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

Я бы не рекомендовал использовать статическое решение, но вы тоже можете его использовать (демо на JSFiddle):

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

Почему вам следует избегать статического решения?

Вы можете определить множество подобных элементов, чтобы задать их положение, но если вы измените ширину в будущем, вам также придется изменить статическую часть определений CSS. Вы не можете полностью избежать использования статических частей в CSS, но вы можете свести их к минимуму!

Ответ №2:

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

Это решение.

Ответ №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;
}

Ответ №4:

Если вы измените свой класс .sticky на приведенный ниже:

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

и удалите это верхнее поле в теле:

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