Почему при просмотре страницы с помощью DevTools не отображаются определенные блоки?

Question

[Светлана]

Добрый день.
Сверстала макет.
https://github.com/SvetlanaSharkunova/MoGo

При обычном просмотре в браузере все отображается.



Начала адаптировать и при просмотре в Chrome DevTools обнаружила, что в первой секции не отображаются 2 абсолютно позиционированных блока (header и slider).


Если пропишу в стилях этих элементов следующее

background-color: green;
border: 3px solid orange;

все видно, но на разрешении Ipad (альбомная ориентация) и выше появляется белая полоса




Стили проверила несколько раз (думала, что где-то задала белый фон и белые буквы на белом не видно, раз на зеленом отображаются... но ничего подобного не нашла...
И потом, если стили верны, header находится поверх секции intro и там не может быть никакой белой полосы.
Не могу понять, где ошибка...

и еще попутный вопрос...
здесь header я абсолютно позиционировала относительно секции, поверх которой он будет располагаться, или правильнее было бы в html вынести header за пределы секции intro и позиционировать его относительно окна браузера?

Comments

[Одиночка Айс]

https://meyerweb.com/eric/tools/css/reset/ для начала

[Светлана]

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

[Ankhena]

Вы задали для intro

min-height: 820px;
background: url(img/introbg.jpg) center no-repeat;

Фон по центру, до верха блока остается промежуток без фона, белый.
Высоты хедера не хватает, чтобы закрыть это белое, вот оно и отображается.
На мобилках мин высота другая и высоты хедера хватает.

Зачем хедеру вообще абсолют?

p.s. reset был актуален в 2007 году. Если хочется использовать сброс, то тогда уж normalize и желательно не бездумно, а только то, что вам оттуда нужно.

[Светлана]

Ankhena, спасибо! Проблема была в неправильно вырезанном фоне из psd.
в данном макете header имеет общий фон с секцией, поэтому позиционирован абсолютно.

[Ankhena]

Светлана, для этого не нужен абсолют
https://jsfiddle.net/m6x8w9rz/
размеры поставила первые какие в голову пришли

[Светлана]

Ankhena, действительно. Спасибо за наглядный пример!