0

блок на фигуру

как сделать так как на картинке, чтоб div с текстом заходил на figure ?

2

2 ответа 2

1

Можно использовать относительное позиционирование. Необходимо добавить блоку с текстом свойство position: relative и сместить его вверх на необходимое количество пикселей, например на 30: top: -30px. Т.к. относительно спозиционированные блоки не выпадают из общего потока элементов и сохраняют за собой место которое занимали изначально, чтобы элементы, расположенные снизу блока отображались корректно и заполняли образованное свободное пространство, нужно добавить блоку отрицательный внешний отступ снизу, равный количеству заданных пикселей в свойстве top: margin-bottom: -30px. Пример:

.section_1 {
  height: 100px;
  background: red;
}

.text_block {
  background: green;
  width: 70%;
  margin: 0 auto;

  position: relative;
  top: -30px;
  margin-bottom: -30px;
}
<div class="section_1"></div>
<div class="text_block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem beatae maiores tenetur ex dolor corrupti laboriosam dicta non necessitatibus exercitationem</div>

1

Используй отрицательный margin-top:

body {
  background: antiquewhite;
}

figure {
  height: 4em;
  margin: 0;
  background: silver;
}

div {
  margin: -2em auto 0;
  width: 50%;
  background: white;
}
<figure></figure>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem beatae maiores tenetur ex dolor corrupti laboriosam dicta non necessitatibus exercitationem</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem beatae maiores tenetur ex dolor corrupti laboriosam dicta non necessitatibus exercitationem

Ваш ответ

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

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