Как фиксировать позицию элемента в CSS?

Question

У меня есть div 'html':

<div class="navigate-panel">
<ul class="Navigation-menu">
    <p class="text-navigation-menu">Навигация</p>
</ul> 
</div>

И я делаю его как панелькой 'css':

.navigate-panel{
width: 900px;
height: 330px;
background-color: #17181c;
margin: 50px auto;
}

И вроде бы панель отобразилась, именно по середине, то что мне нужно. Но, если я например нажму F12(Просмотр кода элемента), то у меня эта панель двигается в левую сторону. А мне это не нужно, так как у меня по верх это панели еще должны быть кое какие элементы. Они то стоят на месте, а вот она двигается. Я попробовал использовать 'position: obsalute', и осле этого она у меня передвигается вообще в непонятную сторону. И сделать её по середине не могу.

Можете подсказать что не так? Как зафиксировать эту панельку? И на будущие, как делать другие элементы в единый элемент? Т.е что бы другие позиционировали от родителя. (По моему локальная позиционирование). И что делать если пользователь будет открывать сайт с телефона? Я проверил, то там полный крындык.

Answer 1

Если вы используете для элемента position: absolute, то родительскому элементу задавайте position: relative (и двигайте элемент свойствами top/left/right/bottom относительно этого родителя)

Answer 2

все можно оставить как есть, но вместо width -> max-width

 .navigate-panel{
      max-width: 900px;
      height: 330px;
      background-color: #17181c;
      margin: 50px auto;
    }

<div class="navigate-panel">
  <ul class="Navigation-menu">
    <p class="text-navigation-menu">Навигация</p>
  </ul> 
</div>

БЛОГ НА HUSL

Как фиксировать позицию элемента в CSS?

Ответы (2 шт):