Icons overriding html/css bootstrap studio

Question

We are making web application using bootstrap studio at frontend. When someone resize window then icons are overriding each other. How can I force icon to go under other icon?

Code and CSS with some logos:

.hibernateLogo,
.sslLogo {
  top: 60%;
  position: absolute
}

.hibernateLogo {
  left: 27%
}

.sslLogo {
  left: 83%
}

.pgLogo {
  position: absolute;
  top: 62%;
  left: 66%
}

<div class="login-dark" style="background-image: url(" assets/img/tlo2.jpg ");margin-right:0px;height:1200px;">
  <img class="logo" style="width: 300px; background-position: center; height: 100px;" src="assets/img/Logo VLEX remake trans.png">
  <div class="container">
    <img class="bootstrapLogo" style="width: 255px;" src="assets/img/tech-bootstrap.png"> <img class="springLogo" style="width: 195px; height: 117px;" src="assets/img/1496434852936.png"> <img class="sslLogo" style="width: 172px;" src="assets/img/ssl-encryption-icon-png-6.png">
    <img class="pgLogo" style="width: 235px;" src="assets/img/pg.png">
    <img class="hibernateLogo" style="width: 266px; height: 82px;" src="assets/img/Hibernate_logo_a.png"> <img class="javaLogo" style="width: 130px;" src="assets/img/Java_logo_icon.png">
  </div>
  <form method="post">
</div>

Answer 1

Ok, position:absolute; on all icons was a problem. I made container in position:absolute; top:80%; and now it works.