Divs are overlayed instead of stacked on top of another

by michaelrodov

HTML

<div class="instructions">
  <div class="column-left"></div>
  <div class="column-center"></div>
  <div class="column-right"></div>
</div>

<div class="personal_info">
  <p></p>
</div>

CSS

.instructions {
  width: 100%;
  padding: 10px;
  background-color: blue;
}
.column-left {
  float: left;
  width: 33%;
  padding: 0px 10px;
}
.column-right {
  float: right;
  width: 33%;
  padding: 25px 10px 0px 10px;
}
.column-center {
  float: left;
  width: 33%;
  padding: 25px 10px 0px 10px;
}
.personal_info {
  position: absolute;
  top:0;
  width: 100%;
  z-index: -1;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  padding: 5px;
  background-color:red;
}