时间戳

首页 > 解决方案 > 减小窗口大小时如何制作2个固定按钮而不重叠它们

html - 减小窗口大小时如何制作2个固定按钮而不重叠它们

问题描述

我有 2 个固定按钮，但是当我减小窗口大小时，它们会一个接一个。

这是我的代码：

<button class="mdl-button mdl-js-button mdl-button--fab" style="display:flex;position: fixed;z-index:23232;top: 89%;margin-right: 3%; color:white;left: 82%;height:7.6%; width:3%;background-color:rgb(0,162,77);"
    (click)="onButtonClicked($event)" *ngIf="createPermission!==false">
    <i class="material-icons">add</i>
</button>

<button class="mdl-button mdl-js-button mdl-button--fab" style="display:flex;position: fixed;z-index:34344;top: 89%;color:white;left: 87%;height:7.6%; width:3%; background-color:rgb(0,162,77);"
    (click)="getProspect($event)">
    <i class="material-icons">get_app</i>
</button>

图片

标签： htmlcss

解决方案

要确定确切的问题，您给我们的信息太少。（我认为您使用材料设计按钮）

但是假设您的按钮没有固定宽度（例如 px）的额外包装元素，则样式中的所有百分比都可能导致问题。

如果定位（如left: 87%）取决于您的屏幕宽度，它将在调整大小时发生变化。由于fixed位置的原因，元素会从正常的文档流中移除并且可以重叠。

要解决此问题，您可以制作一个包装器 div。这样，包装器具有固定位置，并且按钮与屏幕宽度无关。请参阅剪断的代码。

button.mdl-button{
  color:white;
  width: 50px;
  height: 50px;
  margin: 2px;
  background-color:rgb(0,162,77);
}

button.first{
  z-index:23232;
}
button.sec{
   z-index:34344;
}

.wrapper{
  left: 82%;
  background: red;
  display:flex;
  position: fixed;
  bottom: 0;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<div class="wrapper">

<button class="mdl-button mdl-js-button mdl-button--fab first"
    (click)="onButtonClicked($event)" *ngIf="createPermission!==false">
    <i class="material-icons">add</i>
</button>

<button class="mdl-button mdl-js-button mdl-button--fab sec"
    (click)="getProspect($event)">
    <i class="material-icons">get_app</i>
</button>

</div>

我将 css 从 html 中分离出来，并添加了一个包装器 div，如上所述，我也替换了percentages一些px。通过这种方式，您可以更好地控制按钮的位置和大小。

希望这可以解决您的问题。

推荐阅读