A none existing Divbox blocks other Divs

I am making a Website but some of my divboxes with images in them cant go where I would like them to. I could do it with -50% but its for a project and that would get minus points. Do you guys and girls out there have a idee what would couse my problem?

Here is the HTML:

<div class="staerke">
        <div class="staerke-content">
            <div class="staerke-rotbox">
                <div class="staerke-text">
                <h1  class="staerke-titel">Unsere St&auml;rke</h1>
                <p>A team of specialists</p>
                <p>A flexible structure</p>
                <p>Solution oriented</p>
                <p>Close to you Bern | Biel | Zürich | Luzern</p>
                <p>...</p>
                <a href="#"><i class="fa fa-ellipsis-h fa-2x staerke-iconbox"></i></a>
                </div>
            </div>
            <div class="staerke-kleinbild"><img src="img/bild4-klein.png" alt="Schweiz"></div>
            <div class="staerke-hochbild"><img src="img/bild4-hoch.png" alt="Ipad"></div>
            <div class="staerke-grossbild"><img src="img/bild4-gross.png" alt="Arbeit"></div>
            <div class="staerke-spezial"><img src="img/bild4-spezial.png" alt="Glühlampe"></div>
            <div class="staerke-team"><img src="img/bild4-mitarbeiter.png" alt="Mitarbeiter"></div>
    <!--Hintergrund-->

    </div>
    </div>

And the CSS:

.staerke {
    position:relative;
    width:100%;
    padding-bottom:43.308%; /*  100/2.309 = 43.308...*/
    z-index: -999;
}

.staerke-content {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:pink;
    z-index: -999;
}

.staerke-rotbox {
  background-color: rgb(196, 23, 19); 
  margin-left: 2.5%;
  margin-top: 3%;
  height: 52.5%;
  width: 27.65%;
  z-index: 999; 
  color: white;
}
.staerke-titel{
  font-size: 53px;
}

.staerke-text{
  font-size: 28px;
  line-height: 0.9;
  margin-top: 1.75%;
  margin-left: 0.9%;
  position: absolute;
}

.staerke-iconbox {
  background: #EEEBE5;
  color: #81725E;
  width: 50px;
  height: 25px;
  border-radius: 12.5%;
  border: none;

  text-align: center;
  transition: all 0.2s ease-in-out;
  z-index: 999;
}

.staerke-kleinbild {
  position:absolute;
  margin-left: 2.5%;
  margin-top: 2%;
  z-index: 999;
}

.staerke-hochbild {
  position:absolute;
  margin-left: 32%;
  margin-top: 3%;
  z-index: 999;

}

.staerke-grossbild {
  position:absolute;
  margin-left: 42%; /*sollte 42%*/
  margin-bottom: -27.8%; /*sollte 3%*/
  z-index: 999;
}

.staerke-spezial {
  position:absolute;
  margin-left: 42%; /*sollte 42%*/
  margin-top: 3%; /*sollte 3%*/
  z-index: 999;
}

.staerke-team {
  position:absolute;
  margin-left: 54%; /*sollte 54%*/
  margin-top: 3%; /*sollte 3%*/
  z-index: 999;
}

Hope you can help me with tips or tricks how you would face the problem.