Позиционирование в HTML

300
22 января 2018, 06:02

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

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

  1. Является ли это решение семантически верным, если нет, то как добиться такого эффекта наложения, без схлопывания целого блока?
  2. Не является ли плохой практикой задавать абсолютное позиционирование таким большим блокам?
Answer 1

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

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

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

.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>

READ ALSO
Как менять выделение заголовка в меню шапки в зависимости от страницы ?
CSS

Как менять выделение заголовка в меню шапки в зависимости от страницы ?

 319
MYSQL корректный запрос
MySQL

MYSQL корректный запрос

ЗдравствуйтеПодскажите, можно ли, и как, получить одним запросом следующую информацию:

 323
C# Склеить 2 Image
c#

C# Склеить 2 Image

Есть 2 Image: Первое (1280x720): И другое (530x352): Нужно получить в 1280x720: Те добавить на первое второе которое < первого на X - 0, Y - 0

 322
Асинхронная операция была отменена
c#

Асинхронная операция была отменена

Пытаюсь отправить письмо на электронную почту (код взят из документации Microsoft), но операция отменяется и сообщение на почту не приходитПомогите...

 346