Странное поведение - изменение ширины тела, div становится непрозрачным

105
6

У меня очень странная проблема с моим отзывчивым css. Тело 90%.

Если разрешение по горизонтали ниже 1200 пикселей, я меняю его на 100% (с медиа-запросами), но при разрешении ниже 1000 пикселей он снова должен быть на 100%.

Моя страница имеет два центрированных контейнера, другой на левой стороне находится ниже (позади с z-index) правой и имеет фоновое изображение. Оба контейнера имеют ширину жидкости.

Таким образом, в основном, когда ширина экрана идет ниже определенной точки, левый контейнер с изображением немного меньше подходящего. Правильный контейнер имеет запас от 20 пикселей, чтобы оставить некоторое пространство. Эта маржа 20px должна быть прозрачной.

Это работает нормально, но если я масштабирую браузер между 1000px и 1200px, маржа из правильного контейнера содержимого становится непрозрачной, но это не должно. Он должен быть прозрачным, так как он имеет более широкую ширину.

Я не знаю, откуда это происходит, поскольку я ничего не меняю по краям.

Просто масштабируйте свой браузер до ширины между 1000px и 1200px, тогда вы видите зеленый промежуток между изображением и контентом. (и если вы масштабируете litte больше 1200px, вы увидите, что маржа снова прозрачна)

К сожалению, трудно объяснить

спросил(а) 2021-01-19T16:27:06+03:00 2 месяца, 3 недели назад
1
Решение
75

Он не становится непрозрачным.

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

Это 40%, и это становится меньше, чем изображение, когда ваш браузер становится слишком узким.

Если вы добавите min-width:780px в левый div, он будет работать. и поскольку он исправлен и с более низким z-индексом вам не нужно беспокоиться о его размере.

ответил(а) 2021-01-19T16:27:06+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема