Как правильно сверстать?

Question

[LolExtasy]

При верстке возник вопрос. Как же тут лучше поступить ведь вариантов множество, а вот какой более правильный я не совсем понимаю. Можно отрицательными марджинами, можно абсолютом, можно просто задать transform.

Comments

[Ankhena]

Сначала нужно понять, как эти блоки и блоки следующие за ними будут себя вести:
- если контента будет больше или меньше
- при адаптиве

Затем выяснить какие нюансы есть у разных способов.
Например, при трансформе или relative за блоком будет зарезервировано то место, где он находился изначально.
Абсолют выведет элемент из потока и его родители и соседи перестанут что-либо знать о его размерах.
Трансформ создаст новый контекст наложения и это может сыграть свою роль при разных комбинациях z-index.
Margin в % считается от ширины родителя.
И т.д.

Потом выбрать тот вариант, который вам больше нравится.

Вероятнее всего удачно подойдет вариант с padding и равным ему отрицательным margin.

[Хаваж Ильясов]

Можно сделать через линейный градиент

Answer 1

[Fwwll]

кроссбраузерно и по простоте - relative top

.b1 {
  color: #fff;
  text-align: center;
  background-color: #00f;
}
.b2 {
  width: 160px;
  height: 90px;
  background-color: #000;
  margin: 0 auto;
  position: relative;
  top: 1em;
}
<div class="b1">
  Lorem
  <div class="b2"></div>
</div>