Блог

Главная - Вопросы по программированию - Как я собираюсь воспроизвести этот дизайн с перекрытием в контейнере?

Как я собираюсь воспроизвести этот дизайн с перекрытием в контейнере?

#html #css #reactjs #sass

#HTML #css #reactjs #sass

Вопрос:

Это образец дизайна, который я хочу создать.

введите описание изображения здесь

Я использую scss для этой сборки. Спасибо. Потому что я не уверен, как я собираюсь получить высоту 100% для значка изображения и переполнения контейнера? это фрагмент кода.

 .image-container {
  position: relative;
  min-width: 191px;
  height: 160px;
  background-size: cover;
  background-position: center center;
  background: url(${img}) no-repeat;
}  
 <div class="image-container">
  <img src="url here" alt="" />
</div>

Ответ №1:

Есть несколько способов сделать это, используя позиции css, flexbox, сетки и т.д..

Используя z-index, вы можете переместить элемент на передний или задний план. Подробнее здесь

Использование позиций:

 .image-container {
  position: relative;
  min-width: 191px;
  height: 160px;
  background-size: cover;
  background-position: center center;
  margin-top: 30px;
}
img{
max-width: 100%;
height: 100%;
}
#box1{
min-width: 80px;
height: 100%;
background: red;
position: absolute;
min-height: 200px;
top: -30px;
left: 30px;
z-index: -1;
}
#box2{
min-width: 80px;
height: 100%;
min-height: 200px;
background: blue;
position: absolute;
top: -30px;
left: 130px;
}  
 <div class="image-container">
  <img src="https://www.w3schools.com/howto/img_forest.jpg" alt="" />
  <div id="box1"></div>
  <div id="box2"></div>
</div>