@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>
  • Вопрос задан
  • 8781 просмотр
Пригласить эксперта
Ответы на вопрос 1
@atomos90
Обернуть block2 и maindiv еще каким-нибудь div с position=relative, например. Тогда положение block2 и block2:before будет отсчитываться от него, а не от края экрана. Также везде использовать одинаковую размерность, например, если ширина в %, то и положение высчитывать в %. А лучше использовать bootstrap или что-то подобное, не нужно будет ничего высчитывать.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы