Почему блоки накладываются друг на друга css
Перейти к содержимому

Почему блоки накладываются друг на друга css

  • автор:

Свойство z-index

Свойство z-index устанавливает, кто будет сверху в случае, если несколько элементов накладываются друг на друга.

Синтаксис

Число должно быть целым, положительным или отрицательным. Может быть нулем.

Значения

Значение Описание
Число Целое число задает порядок наложения элементов: при накладывании элементов друг на друга сверху окажется тот, у которого z-index больше.
auto Порядок наложения строится автоматически: выше будет тот элемент, который расположен ниже в HTML коде.

Значение по умолчанию: auto .

Пример

В данном примере блоки будут накладываться друг на друга в порядке их следования в HTML коде ( z-index не задан и будет иметь значение по умолчанию — auto ). Первый блок будет в самом низу (красный), а последний — выше всех (зеленый):

#div1 < position: absolute; top: 30px; left: 30px; width: 50px; height: 50px; background: red; >#div2 < position: absolute; top: 60px; left: 60px; width: 50px; height: 50px; background: blue; >#div3 < position: absolute; top: 90px; left: 90px; width: 50px; height: 50px; background: green; >

Пример

Поменяем порядок наложения, задав z-index . Красному блоку — 3 , голубому — 2 , зеленому — 1 . Порядок наложения поменяется на обратный (выше всех будет блок с z-index 3):

Почему блоки накладываются друг на друга и пропадает текст?

введите сюда описание изображения

У меня должно быть три блока, которые идут за другом. Внутри каждого из них – блок с текстом. Вот что получается у меня – отображается только один блок, текста вообще нигде не видно:

.groups_line < margin: 0 auto; padding-right: 40px; padding-left: 40px; >.line < width: 519px; height: 360px; margin-right: 4px; position: relative; display: inline-block; >.line:last-child < margin-right: 0px; >.first_group < background-image: url(https://i.postimg.cc/L8tyDfNC/13-2x.png); >.second_group < background-image: url(https://i.postimg.cc/QNRGnQJh/kaboompics-com-Woman-preparing-a-lunch-on-the-kitchen-table.png); >.third_group < background-image: url(https://i.postimg.cc/76fdKhC5/photo-1453822858805-7c095c06011e.png); >.border

 

beauty health lifestyle

FROM GRAPEFRUIT TO LEMONS TO ORANGES, CITRUS DOES YOU GOOD!

June 14, 2015

24

health

Также ссылка на codepen

Вопрос по CSS. Почему блоки накладываются друг на друга?

Без ссылки по одному коду врятли че подскажу. Ссылку в студию плиз. Ну или хотябы скрин.

CSS недостаточно. где код HTML, где блоки с этими свойствами прописаны?

у второго блока который накладывается надо тоже прописать float:left или прописать в меню clear:both;
а лучше добавить html и вам точно ответ напишут

позиционирования нет у 2 3

Похожие вопросы

Ваш браузер устарел

Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.

Элементы накладываются друг на друга и выводятся с неправильными размерами объясните в чём проблема?

Lynn

3.8. Использовать для демонстрации фрагментов кода только специальный тег < code >или специальные демонстрационные ресурсы (например, JsFiddle — https://jsfiddle.net/). Размещение фрагментов кода в виде изображений запрещено.

Ankhena

Ankhena @Ankhena Куратор тега CSS

Элементы накладываются друг на друга

Не вижу, чтобы они накладывались.

выводятся с неправильными размерами объясните в чём проблема?

Потому что по умолчанию flex-shrink равен 1 и элементы пытаются сжаться, чтобы поместиться в контейнер.
Поставьте flex-shrink: 0 , чтобы они перестали это делать.

AntonLitvinenko

Антон Литвиненко @AntonLitvinenko
а какого поведения ожидали? независимо от ширины элементы сужаются чтобы влезть в контейнер.
Решения вопроса 0
Ответы на вопрос 1

CollonilTolli

Collonil Tolli @CollonilTolli

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

max-width: 3423923px; width:100%;

так они не будут прыгать по всей странице.
так же, если используются флексы, то flex-wrap: no-wrap; будет весьма не плохим решением.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *