覆盖 html/css 引导工作室的图标答案

【问题标题】：Icons overriding html/css bootstrap studio覆盖 html/css 引导工作室的图标
【发布时间】：2017-07-31 10:45:28
【问题描述】：

我们正在前端使用 bootstrap studio 制作 Web 应用程序。当有人调整窗口大小时，图标会相互覆盖。如何强制图标位于其他图标下方？

带有一些徽标的代码和 CSS：

.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>

【问题讨论】：

可以添加相关代码吗？
首先请阅读How to Ask;您的问题应直接包含相关代码，而不仅仅是屏幕截图。 // 这看起来像默认的 flexbox 行为...在这种情况下，将 flex-wrap:wrap 添加到容器中。
@CBroe .container{position:relative;flex-wrap:wrap} 没有任何变化，它们仍然在覆盖
@Michu93 好吧，那是因为您没有使用 flexbox（这只是我的猜测，因为您当时没有显示任何代码），但绝对将元素定位在百分比位置。（如果你想阻止它们重叠，那是你应该停止做的第一件事。）

标签： html css twitter-bootstrap bootstrap-studio

【解决方案1】：

好的，所有图标上的position:absolute; 是个问题。我在position:absolute; top:80%; 中制作了容器，现在它可以工作了。

【讨论】：