Div перекрывающийся родительский div - PullRequest
Новая
       22

Div перекрывающийся родительский div

0 голосов
/ 22 января 2020

Я пытаюсь добиться следующего:

enter image description here

Таким образом, темно-синий прямоугольник будет родительским div, а затем темно-синий один будет ребенком div, см. изображение выше.

У меня есть приведенный ниже код, но я не могу понять, как его достичь! 

body {
  padding: 0;
  margin: 0;
  background-color: #6ca591;
}

.container {
  margin: 50px auto;
  width: 1000px;
  background-color: red;
  padding: 80px;
}

.portfolio_main_img {
  background-color: #327acd;
  display: block;
  position: relative;
  padding-bottom: 30px;
  z-index: 1;
}

.portfolio_main_img img {
  margin: -28px auto 0 auto;
  display: table;
  position: relative;
  width: 50%;
  z-index: 99;
}
<div class="container">
  <div class="portfolio_main_img">
    <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  </div>
</div>

Если кто-нибудь может мне помочь или дать несколько советов, это будет очень признательно!

1 Ответ

2 голосов
/ 22 января 2020

Вы столкнулись с сужением полей, когда отрицательное поле вытягивает контейнер, а не только изображение. Измените изображение на inline-block, чтобы избежать этого, и отцентрируйте его, используя text-align

body {
  padding: 0;
  margin: 0;
  background-color: #6ca591;
}

.container {
  margin: 50px auto;
  width: 1000px;
  background-color: red;
  padding: 80px;
}

.portfolio_main_img {
  background-color: #327acd;
  display: block;
  padding-bottom: 30px;
  text-align:center;
}

.portfolio_main_img img {
  margin: -28px auto 0 auto;
  display: inline-block;
  width: 50%;
}
<div class="container">
  <div class="portfolio_main_img">
    <img src="https://via.placeholder.com/150C/O https://placeholder.com/">
  </div>
</div>
...