-2

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?

enter image description here

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>
Andrzej Ziółek
  • 2,241
  • 1
  • 13
  • 21
Michu93
  • 5,058
  • 7
  • 47
  • 80
  • 3
    can you add the relevant code? – Mike Donkers Jul 31 '17 at 10:46
  • 1
    First of all, please go read [ask]; your question should contain relevant code directly , not just screenshots. // That looks like default flexbox behavior ... in that case, add `flex-wrap:wrap` to the container. – CBroe Jul 31 '17 at 10:48
  • 1
    @CBroe .container{position:relative;flex-wrap:wrap} nothing change, they are still overriding – Michu93 Jul 31 '17 at 10:59
  • @Michu93 well that’s because you are not using flexbox (that was just a guess by me, since you had not shown any code at that point), but are absolutely positioning the elements at percentaged positions. (And if you want to stop them from overlapping, that is the first thing you should _stop_ doing.) – CBroe Jul 31 '17 at 11:02

1 Answers1

0

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

Michu93
  • 5,058
  • 7
  • 47
  • 80