Исправлено положение не работает независимо от того, что я делаю

Question

Это не сработает в любом браузере. Я подтягиваю его. Я даже не могу заставить свойство фиксированной позиции работать, следуя инструкциям.

Вот один учебник, который я пробовал среди других. https://youtu.be/3I2Uh-D-lzI Все идет отлично, пока я не вхожу в положение: исправлено; линия.

Я просто хочу фиксированный нав, который следует вниз страницу как пользователь прокручивает ...

CSS:

header { 
    height: 100px; 
    width: 100%; 
    position: fixed; 
    -webkit-transform: translateZ(0); 
    top: 0px; 
    left: 0px; 
    right: 0px; 
} 

.container{ 
    margin: 0 auto; 
} 

HTML:

<header> 
    <div class="container"> 
     <div class="logo"> 
      <h1>Company Name</h1> 
     </div> 
     <nav> 
      <ul> 
       <li><a href="#">services</a></li> 
       <li><a href="#">resources</a></li> 
       <li><a href="#">about</a></li> 
       <li><a href="#">contact</a></li> 
      </ul> 
     </nav> 
    </div> 
</header> 

Answer 1

Здесь необходим CSS для nav, чтобы исправить:

header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 9999; 
    width: 100%; 
    height: 100px; 
    -webkit-transform: translateZ(0); 
    background-color: #00a087; 
} 

Удалите стили, которые вам не нужны. например, фон.

Это очень хороший источник для чтения, чтобы сделать nav бар фиксируется в верхней части: http://sixrevisions.com/css/fixed-navigation-bar/

Я создал скрипку: https://jsfiddle.net/tn0hm9y7/

Answer 2

Данный ответ должен работать, но вот почему: Вам нужно удалить, что преобразование ,

Свойство transform начинает новый контекст укладки и содержит поле. Перевод: элемент, который имеет как преобразование, так и фиксированное положение, по существу, придерживается самого себя, а не окна, как вы этого хотите.

https://stackoverflow.com/a/15256339/4504641

Answer 3

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

<style> 
header { 
    height: 100px; 
    width: 100vw; 
    position: fixed; 
    -webkit-transform: translateZ(0); 
    top:0px; 
    left:0px; 
} 
.container{ 
    margin: 0 auto; 
} 
</style> 

Если вы хотите проверить, просто введите div в большую высоту в корпусе.

<div style="height:1200px;">&nbsp;</div> 

Мне нравится использовать ширину: 100vw; (Viewport Width), потому что он будет захватывать всю ширину экрана независимо от того, в каком элементе находится элемент. Вам не нужно указывать «правый», если вы укажете «left».