html - 将 div 与上面的 div 重叠

Question

好的，所以我一直在尝试做这样的事情:

Example

但是，每当我更改“3”的上边距时，它也会将“2”拉高到相同的高度。我将“3”包裹在“2”内，因为我希望底部对齐。

html,body {
  margin: 0;
  padding: 0;
}

.example {
  background-color: #222;
  padding: 100px;
  text-align: center;
  color: white;
}

.div2 {
  background-color: #e8e8e8;
}

.div3 {
  margin: -50px auto 0px auto;
  padding: 20px;
  background-color: #fff;
  text-align: center;
  width: 80%;
}

h1,p {
  padding: 0px;
  margin: 0px;
}

<div class="example">
  <h1>
  Div 1
  </h1>
</div>
<div class="div2">
  <div class="div3">
   <h1>
   Div 3
   </h1>
   <p>
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   </p>
  </div>
</div>
<div class="example">
  <h1>
  Div 4
  </h1>
</div>

Answer 1

这是利润率下降的结果。我会简单地以“相反的方式”进行操作，相对定位元素，并使用负边距底部使外部 div 底部再次对齐。

html,body {
  margin: 0;
  padding: 0;
}

.example {
  background-color: #222;
  padding: 100px;
  text-align: center;
  color: white;
}

.div2 {
  background-color: #e8e8e8;
}

.div3 {
  position: relative;
  top: -50px;
  margin: 0 auto -50px auto;
  padding: 20px;
  background-color: #fff;
  text-align: center;
  width: 80%;
}

h1,p {
  padding: 0px;
  margin: 0px;
}

<div class="example">
  <h1>
  Div 1
  </h1>
</div>
<div class="div2">
  <div class="div3">
   <h1>
   Div 3
   </h1>
   <p>
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   </p>
  </div>
</div>
<div class="example">
  <h1>
  Div 4
  </h1>
</div>