почему не работает top and left у элемента?

Question

#general {
  height: 5797px;
}

#header1 {
  background: rgb(233, 233, 233);
  margin: 0 auto;
  max-width: 1366px;
  width: 100%;
  height: 11.5577%;
}

#picture1 {
  position: relative;
  top: 5.6716%;
  left: 7.1742%;
}

.nav1 {
  position: relative;
  top: 6.7164%;
  left: 47.73%;
}

<div id="general">
  <header id="header1">
    <img src="01_one_page.png" id="picture1">
    <nav class="nav1">
      <a href="#">home</a>
      <a href="#">about</a>
      <a href="#">work</a>
      <a href="#">process</a>
      <a href="#">services</a>
      <a href="#">testimonials</a>
      <a href="#">contact</a>
    </nav>
  </header>
</div>

почему не работает top и left у #picture? top и left работает только у .nav1

Answer 1

Заменить у элементов #picture1 и .nav1 способ позиционирования position: relative; на position: absolute;

#general {
  height: 5797px;
}

#header1 {
  background: rgb(233, 233, 233);
  margin: 0 auto;
  max-width: 1366px;
  width: 100%;
  height: 11.5577%;
}

#picture1 {
  position: absolute;
  top: 5.6716%;
  left: 7.1742%;
}

.nav1 {
  position: absolute;
  top: 6.7164%;
  left: 47.73%;
}

<div id="general">
  <header id="header1">
    <img src="01_one_page.png" id="picture1">
    <nav class="nav1">
      <a href="#">home</a>
      <a href="#">about</a>
      <a href="#">work</a>
      <a href="#">process</a>
      <a href="#">services</a>
      <a href="#">testimonials</a>
      <a href="#">contact</a>
    </nav>
  </header>
</div>

Answer 2

Проблема в хроме. Есть соответствующий баг еще с 2017 года, но продвижения по нему нет.

Суть бага: неправильно рендерится inline или inline-block элемент с позицией relative, у которого значение top указано в процентах.

Для решения можно поменять значение свойства display на block:

#general {
  height: 5797px;
}

#header1 {
  background: rgb(233, 233, 233);
  margin: 0 auto;
  max-width: 1366px;
  width: 100%;
  height: 11.5577%;
}

#picture1 {
  position: relative;
  top: 10%;
  left: 7.1742%;
  display: block;
}

.nav1 {
  position: relative;
  top: 15%;
  left: 47.73%;
}

<div id="general">
  <header id="header1">
    <img src="01_one_page.png" id="picture1">
    <nav class="nav1">
      <a href="#">home</a>
      <a href="#">about</a>
      <a href="#">work</a>
      <a href="#">process</a>
      <a href="#">services</a>
      <a href="#">testimonials</a>
      <a href="#">contact</a>
    </nav>
  </header>
</div>

БЛОГ НА HUSL

почему не работает top and left у элемента?

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