Div 父级重叠 div

Question

我正在努力实现以下目标：

因此，深蓝色框将成为父框 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>

如果有人能帮助我或给我一些提示，将不胜感激！

Answer 1

您正面临边距折叠，其中负边距拉动容器而不仅仅是图像。将图像更改为 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>

Div 父级重叠 div

Div overlapping parent div

html

css

layout

overlapping