Как сверстать наслаивающийся блок чтобы у него сохранялась высота?

Question

[DZHAMBUALT]

Здрасте! У меня есть блок в котором есть два элемента где один наслаивается на другой.


Я пробовал с помощью position absolute но при абсолютном позиционировании у родительского блока теряется его высота вот как на картинке.


Больше ничего в голову не приходит. И да я не хочу использовать фиксированную высоту так как блок может иметь динамическую высоту

Comments

[Ankhena]

Банальный отрицательный margin

Либо гриды

[DZHAMBUALT]

Ankhena, Как через гриды можете объяснить

[Ankhena]

DZHAMBUALT, три строки, каждый элемент занимает по 2.
auto 200px auto
скорректируйте как надо

[Ankhena]

Ещё вариант большой паддинг, потом отрицательный margin или relative у левого блока.

Answer 1

[Сергей delphinpro]

.parent {}

.one {
  width: 315px;
  height: 275px;
}

.two {
  width: 450px;
  height: 245px;

  margin-left: 215px;
  margin-top: -210px;
}

Comments

[DZHAMBUALT]

Ну вот смотрите да с margin можно но мне бы хотелось более точное решение, ну типо когда position absolute делаешь ты можешь указать конкретное значение от top, например 100px, и если у элемента с классом one будет другая высота например 350px то с margin это будет смотреться не так как задумывалось.

[DZHAMBUALT]

Ваше решение можно использовать вместе с js определяя высоту элемента с классом one. И я этого избегал и хотел более элегантного решения только с css

[Сергей delphinpro]

DZHAMBUALT, вы имеете ввиду, что красный блок нужно поднять на две третьих от синего?

[DZHAMBUALT]

Не на две третьих а на какое-нибудь фиксированное число. У меня в макете это 100px от верхней границы родительского блока. Если блок с классом one имеет динамическую высоту которая может быть разной в какой-нибудь период времени то с margin не получиться точно указать отступ от верхней границы на 100px

[DZHAMBUALT]

Сергей delphinpro, Вот ещё пример где у синего блока изменилась высота

[Ivan Ustûžanin]

DZHAMBUALT, если фиксировано от верха, то только grid

[Ankhena]

Ivan Ustûžanin, ну нет, далеко не только. Да и начальное положение может быть разным, как один под другим, так и рядом.
Но гридом удобно, тут не поспоришь.

[Ivan Ustûžanin]

Ankhena, упс, когда писал коммент, как-то пропустил "без большого геморроя" )

ПЛЮС: вообще если есть перекрывающийся контент, который должен влиять на flow, то я сразу не особо парясь использую grid, а не пытаюсь страдать )