Задать вопрос
@LissaAlbatross
адаптивный-дизайн

Как сделать так, чтобы блоки не наезжали друг на друга при любом разрешении экрана?

.maindiv{
    position: absolute;
    width: 60vw; /* Ширина */
    height: 90vh;  /* Высота */
    background: url(../img/businessman.png);  /* Фоновая картинка */
    background-size: cover;
    background-position: right; 
    color: black; 
    text-align: left; 
    padding-top: 0px;  /* Отступ сверху */
    padding-right: 0px;
    right:0px;
    z-index: 1;
    background-repeat: no-repeat;
}
.block2{
    position: relative;
    font-size: 1.5em;
    width: 100%; /* Ширина */
    height: 100%;  /* Высота */
    color: black; 
    text-align: left;
    padding-left: 0px;
    left:0px;
    z-index: 1;
    background-repeat: no-repeat;
}
.block2:before {
  content: '';
  position: absolute;
  display: inline;  
  left: 0;
  top: 0;
  width: 80%;
  bottom: 0;
  background-image: url(../img/block2.png);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -1;}
.block2Wrap{z-index: 1; padding-left: 35%; padding-top: 15vh;}

<div class="maindiv col-7 right d-none d-sm-none d-xs-none d-lg-inline d-xl-inline">
</div>
<div class="block2">
...
</div>
  • Вопрос задан
  • 9609 просмотров
12 комментариев
Подписаться 1 Простой 12 комментариев
Пригласить эксперта
Ответы на вопрос 1
@atomos90
Обернуть block2 и maindiv еще каким-нибудь div с position=relative, например. Тогда положение block2 и block2:before будет отсчитываться от него, а не от края экрана. Также везде использовать одинаковую размерность, например, если ширина в %, то и положение высчитывать в %. А лучше использовать bootstrap или что-то подобное, не нужно будет ничего высчитывать.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Senior product designer
Сбер • Москва
от 300 000 ₽
Преподаватель в онлайн школу Создание сайтов на Tilda/Figma
CODDY
от 30 000 до 65 000 ₽
Преподаватель по Figma
CODDY • Москва
от 40 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Требуется адаптивная верстка интернет-магазина по макету из Figma
26 нояб. 2024, в 01:46
600 руб./в час
Редизайн и доработка интернет магазина на wordPress
25 нояб. 2024, в 23:42
50000 руб./за проект
Разработка мобильного приложения с дополненной реальностью (AR)
25 нояб. 2024, в 23:32
200000 руб./за проект
Ещё заказы