0

Подскажите, как правильно позиционировать при такой задаче:

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

Задаю "содержимому экрана 2" абсолютное позиционирование и выравниваю его относительно "экрана 1", чтобы получить эффект наложения. Но тогда высота "экрана 2" становится равна нулю. И когда я прописываю "футер", его приходится позиционировать от "экрана 1" и писать margin-top в сотни пикселей.

  1. Является ли это решение семантически верным, если нет, то как добиться такого эффекта наложения, без схлопывания целого блока?
  2. Не является ли плохой практикой задавать абсолютное позиционирование таким большим блокам?
1
  • А задавать высоту второму блоку не пробовал?, также можно попробовать отрицательный отступ для содержимого 2, который находится как я понял в контейнере
    – E1mir
    21 янв 2018 в 13:59

2 ответа 2

1

Абсолютное позиционирование - это не лучший вариант для такой задачи. Есть 2 очевидных варианта, как сделать проще:

  • Как уже написали выше - можно использовать отрицательные margin - тогда остальные элементы страницы перестраиваются в зависимости от позиции сдвигаемого элемента.
  • Второй вариант - использовать position: relative; с указанием координат сдвига. При этом варианте - все остальные элементы страницы будут вести себя так, будто элемент стоит в своем изначальном положении.
1

Для решения таких ситуаций, я использую не позиционирование, а отрицательные внешние отступы

.block {
  /* Указываем вертикальные внутренние отступы, чтобы внешние отступы блоков не схлопывались */
  padding: 1px 140px;
  
  /* Указываем отрицательное значение внешний отступам, чтобы "съесть" внутренние отступы (https://habrahabr.ru/post/257327/) */
  margin: -1px 0;
  
  min-height: 100px;
  color: white;
}

.content {
  line-height: 70px;
  /* Поднимаем элемент */
  margin-top: -20px;
}
<div class="block" style="background: #1b5d7f">Экран 1</div>
<div class="block" style="background: #1b277d">
  <div class="content" style="background: #1f9348">Содержимое экрана 2</div>
  Экран 2
</div>
<div class="block" style="background: #3a50da">Подвал</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.