Div重叠而不是堆叠在顶部

Question

我想让多个div叠加在一起。根据之前提出的类似问题的回答，我使用了一个主容器，它具有相对定位和div的绝对定位。我甚至试过给他们z指数，但Div仍然重叠。

请在下面找到html;响应2完全重叠响应1 Div。

＆＃13;

＆＃13;

body {
  background-color: #dbdbdb;
}

h1 {
  font-size: 20px;
  font-style: normal;
  color: #000000;
  margin-top: 0px;
}

h2 {
  font-size: 22px;
  font-style: normal;
  font-weight: normal;
  color: #000000;
  margin-top: 0px;
}

h3 {
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  color: #000000;
  margin-top: 0px;
}

p {
  font-size: 20px;
  font-style: normal;
  color: #000000;
}

p.dataTitle {
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
  color: #000000;
}

.responsePanel {
  border-style: solid;
  border-width: 1px;
  border-color: black;
}

.titleBar {
  background-color: #ffffff;
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 50px;
}

.titleText {
  position: relative;
  left: 35px;
  top: 0px;
}

.titleValue {
  position: absolute;
  left: 35px;
  top: 24px;
}

.titleDataSource {
  position: absolute;
  right: 128px;
  top: 34px;
}

.mugshotContainer {
  background-color: #ffffff;
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 52px;
  width: 33%;
  height: 420px;
}

.locationData {
  position: relative;
  left: 5px;
  top: 0px;
}

.personNameContainer {
  background-color: #ffffff;
  border-width: 0px;
  position: absolute;
  left: 0%;
  top: 52px;
  width: 100%;
}

.personName {
  position: relative;
  left: 5px;
  top: 0px;
}

.personDescriptionContainer {
  background-color: #ffffff;
  border-width: 0px;
  position: absolute;
  left: 66.60%;
  top: 52px;
  width: 33.3%;
  height: 420px;
}

.activityContainer {
  background-color: #ffffff;
  border-width: 0px;
  position: absolute;
  left: 66.60%;
  top: 52px;
  width: 33.3%;
  height: 420px;
}

.personDescriptionData {
  position: relative;
  left: 5px;
  top: 0px;
}

.personLocations {
  background-color: #ffffff;
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 474px;
  width: 100%;
  height: 150px;
}

.personLocationsData {
  position: relative;
  left: 5px;
  top: 0px;
}

table#locationsTable {
  width: 99%;
}

table#locationsTable tr:nth-child(even) {
  background-color: #eee;
}

table#locationsTable tr:nth-child(odd) {
  background-color: #fff;
}

table#locationsTable th {
  color: white;
  background-color: black;
}

table#locationsTable td {
  text-align: center;
}

#response1 {
  position: relative;
  width: 95%;
}

#response2 {
  position: relative;
  width: 95%;
}

.outer {
  position: relative;
}

＆＃13;

<div class="outer">
  <div class="responsePanel" id="response1">
    <div class="titleBar">
      <div class="titleText">
        <h1>Game 1</h1>
      </div>
      <div class="titleValue">
        <h2>sas</h2>
      </div>
      <div class="titleDataSource">
        <h3>Data Source: </h3>
      </div>
    </div>
    <div class="personNameContainer">
      <!---->
      <p class="personName">xyz/p>
    </div>
  </div>
  <div class="responsePanel" id="response2">
    <div class="titleBar">
      <div class="titleText">
        <h1>what</h1>
      </div>
      <div class="titleValue">
        <h2>xyz</h2>
      </div>
      <div class="titleDataSource">
        <h3>Data Source: </h3>
      </div>
    </div>
    <div class="personNameContainer">
      <!---->
      <p class="personName">blah blah</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

JS Fiddle

https://jsfiddle.net/qe36n9hm/1/