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

121

22 декабря 2020, 02:10

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

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

Answer 2

Используй отрицательный 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