Float-relative overlap

If a div sibling to a float left one is positioned (relative), the second div overlap the float.

HTML

<div class="container">
  <div class="box" id="e1">
    Aside
  </div>

  <section class="box" id="e2">
    Section
  </section>

</div>


<div class="container">
  <div class="box" id="e3">
    Aside
  </div>

  <section class="box" id="e4">
    Section
  </section>

</div>

CSS

.box {
  background-color: lightgreen;
  border: 2px solid black;
  border-radius: 6px;
  line-height: 40px;
  text-align: center;
}
.container + .container {
  margin-top: 2rem;
}

#e1 {
  float: left;
  width: 30%;
  position: relative;
    top: 18px; left: 3px;
  z-index: 1;
  background: repeating-linear-gradient( -30deg, #4763ff40 0, #4763ff40 20px, tomato 20px, tomato 40px);
}

#e2 {
  position: relative;
  min-height: 10rem;
  padding: 0 1rem;
}

#e3 {
  float: left;
  width: 30%;
  background: repeating-linear-gradient( -30deg, #4763ff40 0, #4763ff40 20px, tomato 20px, tomato 40px);
}
#e4 {
  position: relative;
  float: left;
  min-height: 10rem;
  padding: 0 1rem;
}

JavaScript

/*
http://forum.alsacreations.com/topic-1-79878-1-Overlapentreunfloatetundivfrnrepositionnn.html

1- z-index
2- BFC
*/