Свойство CSS z-index. Проблема один элемент перекрывает другой.
Работая с позиционированием элементов на веб-странице можно столкнуться с тем, что один блок может "наехать" на другой блок, перекрыть и сделать часть его невидимой.
Вот пример такой ситуации.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
"Блок 2" перекрывает "Блок 3", т.к. он находится выше по коду.
По умолчанию, на самом верху отображаются те блоки, которые находятся выше по коду. Но, что делать если нам нужно изменить порядок их отображения?
Для решения этой проблемы в css используется специальное свойство, которое называется z-index.
Значением свойства z-index является целое число. Хотя в спецификации и написано, что это число может быть отрицательным, но я советую вам пользоваться только положительными числами, т.к. в старых браузерах могут быть проблемы с отображением отрицательного z-index.
Это свойство работает только для тех элементов, которые имеют свойство CSS position в значении relative, absolute или fixed.
Давайте попробуем для примера выше поменять порядок отображения блочных элементов.
Разместим "Блок 3" поверх "Блока 2".
Для этого обоим блокам присвоим свойство position:relative, для того, чтобы свойство z-index начало работать.
css: div с текстом накладываются один на другой, вместо того, чтобы располагаться один под другим
Но почему-то происходит наложение одной строки текста (нижней) на другую (верхнюю), хотя должна быть сначала одна строка (верхняя), потом 5px пробел, потом вторая строка (нижняя).
В чем проблема, почему так не выводится?
Это реализовано на FLEX-х
Проблема решается, но потребуется 15-20 строк кода. Я бы порекомендовал бы использовать лучше таблицу
Это лишь пример и нуждается в доработке.
По результатам ответов выделил решения, которые работают
1) метод, предложенный Air
- дочерние элементы занимают 100% высоты от родительского элемента
- свойство flex не полностью поддерживается браузером IE (только 11 версией и то не до конца)
2) метод, предложенный DaemonHK:
использование в дочерних div свойства font-size, position, vertical-align, использование в родительском свойства font-size: 0px: https://jsfiddle.net/o88pfdqr/
- перестало работать выравнивание справа для одного элемента (https://jsfiddle.net/o88pfdqr/1/)
- использование font-size для дочерних элементов и обнуление его для родительского элемента
3) метод, предложенный Дмитрием Поляниным:
использование в дочерних элементах flex, а в родительском clear: https://jsfiddle.net/o88pfdqr/4/
- теряется высота родительского элемента, т.е. дочерний элемент может стать больше родительского по высоте
Общий вывод:
Наилучший способ, как мне кажется, у AIR, но меня пугает flex своей несовместимостью (надо протестировать), при том, что я реально взаимодействую с людьми у которых чуть ли не IE6 стоит 🙂 (утрирую немного)
Есть еще одна проблема-вопрос
Дополнительно я хотел бы обеспечить следующий функционал (тоже только листами стилей без привлечения дополнительных тегов):
если высота дочерних блоков меньше 27px, то выполняется выравнивать дочерних элементов по вертикали (middle) в родительском блоке, который 27px, а если хотя бы 1 дочерний элемент больше по высоте 27px, то выравнивание выполняется по top
Почему блоки накладываются друг на друга?
Хочу сделать на каждом блоке параллакс эффект при скролле.
Объясните, пожалуйста, почему блоки наложились друг на друга и как это исправить?
Ответы (1 шт):
В общем я ответ написал не по вашему коду, но скажу так — что на css хоть как бы и проще в плане производительности но сложнее в понимании.. На javascript этот эффект при скроле легче воспроизвести но ответ мой на css
скролл хорошо видно если тянуть за скроллбар и смотреть на полный экран
Один блок налезает на другой (адаптивная верстка)
Учусь адаптивной верстки, по сути легко (просто для определенного размера экрана задать другие стили, немного переделанные под мобильные девайсы). Но, вроде бы все хорошо, все легко и тут столкнулся с проблемой. Один блок налезает на другой, хотя все флоаты вроде как убрал. Может я чего не вижу. Вот, прошу помощи
HTML (ссылка на пастбин, так как не дает создать тему):
И мастера адаптивной верстки, что еще не так в моих начинаниях?
Буду благодарен за ответы!
P.S.: Чтобы долго не искать, проблемный блок contact в блоке post-contact.
Не. Ошибка, и ошибка первая — высоты для всех блоков контента. Вы задаете их фиксированно. Это неверно.
Необходимо задавать в процентах. Иначе как при сжатии экрана контент будет вытягиваться в рамках своего блока?
Т.е. для данной блока будет верным:
Следите за высотами, проценты не только для адаптива но и в базе.
Соответственно, лучше сразу привыкайте следить за шириной, тоже в процентах лучше.
Ну и второй косяк: у вас дублируются классы в стилях, тот же .content да и другие. Когда правите свой style.css, то лучше делайте 10 копий файла, и меняйте их, проверяя какой лучше. А теперь придется весь файл чистить.
Третье, что сразу бросается в глаза — размеры экранов в адаптиве, т.е. т.н. точки слома. У вас слишком с мелкого начинается.
ctrl+shift+M в том же firefox и чекайте основные разрешения, точки слома.
Еще что-то с центровкой самого сайта вроде, но я смотрю на 1920х1080, может туплю 🙂
Сам сайт симпотичный, для учебы удобен.
З.Ы. Следите за чистотой кода и копиями файла стилей, если надо в notepad++ сами себе с пометками /**/ вносите правки и дату/время.
Сегодня поделал, сохранил, завтра вечером продолжил и час разбираешься что и куда менял — воротил.
Привыкайте работать сразу чисто. Удачи!
Nomiki:
Не. Ошибка, и ошибка первая — высоты для всех блоков контента. Вы задаете их фиксированно. Это неверно.
Необходимо задавать в процентах. Иначе как при сжатии экрана контент будет вытягиваться в рамках своего блока?
Т.е. для данной блока будет верным:
.content <
float: left;
height: 100%;
>
Следите за высотами, проценты не только для адаптива но и в базе.
Соответственно, лучше сразу привыкайте следить за шириной, тоже в процентах лучше.
Ну и второй косяк: у вас дублируются классы в стилях, тот же .content да и другие. Когда правите свой style.css, то лучше делайте 10 копий файла, и меняйте их, проверяя какой лучше. А теперь придется весь файл чистить.
Третье, что сразу бросается в глаза — размеры экранов в адаптиве, т.е. т.н. точки слома. У вас слишком с мелкого начинается.
ctrl+shift+M в том же firefox и чекайте основные разрешения, точки слома.
Еще что-то с центровкой самого сайта вроде, но я смотрю на 1920х1080, может туплю 🙂
Сам сайт симпотичный, для учебы удобен.
З.Ы. Следите за чистотой кода и копиями файла стилей, если надо в notepad++ сами себе с пометками /**/ вносите правки и дату/время.
Сегодня поделал, сохранил, завтра вечером продолжил и час разбираешься что и куда менял — воротил.
Привыкайте работать сразу чисто. Удачи!
У меня такое же разрешение, с центровкой все хорошо. Можете скрин выслать?
И центровка же банальная:
Так и нужно же дублировать если Вы про адаптив? По сути не трогая html меняем CSS под мобильные.
Я продвинутый начинающий 🙂
выше уже написали
tommy-gung:
выше уже написали
Ага, понял, спасибо 🙂
Я что-то затупил, забываю переопределить стили.
Так как первый адаптивный шаблон, но, на ошибках учатся, ради этого я верстаю эти шаблоны.
Кстати, понял в чем косяк с «неправильно отцентрировано». У меня min-width для хедера и футера стояло (!) 1900px, при том что враппер 1230px
Я на планшете открыл и чуть ли не офигел, сидел минут 10 не понимал почему margin: 0 auto; не срабатывает для враппера, ведь планшет не попадает под адаптив (и слава Богу, а то бывает такие сайты открываю на планшете, что одна буква на весь экран).
Konark, вы учитесь адаптивной верстки и позвольте дать вам совет.
Есть такой термин, как «mobile first».
Это означает, что вы верстаете первичную версию под самое мелкое разрешение экрана, которое вы планируете поддерживать.
А далее уже добавляете стили для других разрешений экрана — планшет, компьютер, широкий формат.
Добавить дополнительные стили для компьютера (например, закрепить сайдбар справа), намного проще, чем делать эти действия в обратном порядке.
Пользователи запрашивающие ваш сайт через мобильные телефоны, склоны больше всех иметь медленное подключение (EDGE, 3G).
Мобильные телефоны, просто не могут подгружать и парсить еще 20 килобайт стилей, для корректной отрисовки страницы.
Согласно методики «mobile-first», стили для разрешений экранов больше, чем мобильные телефоны, вы вставляете с атрибутом media=»(min-width: 640px)» (например).
Соответственно, мобильные телефоны не будут скачивать эти дополнительные стили, которые им никогда не понадобятся — это сохранит время на загрузку файлов, парсинг CSS, в результате более быстрое отображение страницы, экономия трафика и заряда батареи.
Также, браузеры и боты, которые не поддерживаю Media Queries, будут получать самую упрощенную версию сайта — возможность ошибок в отображении сводиться к минимуму.
Googlebot Mobile, тоже не будет получать эти дополнительные стили, как в результате, быстрее будет получать ваши страницы — плюс для ранжирования, а также экономия ресурсов сервера.