时间戳

首页 > 解决方案 > Angular 5：将按钮半放在垫子对话框之外

css - Angular 5：将按钮半放在垫子对话框之外

问题描述

我希望对话框有一个关闭按钮，它位于对话框的右上角（半内/半外），就像图像中的那个：

我可以使用绝对定位来实现这一点，但这不是一个可行的选择。

我想参考对话框定位按钮，我也尝试使用float:right并给出margin-top否定但另一半即使设置z-index为超过 1000 也是隐藏的。

<button mat-mini-fab style="cursor:pointer;position:absolute;top:420px;left:900px">
<i class="material-icons" (click)="close()">close</i>
</button>

图片（礼貌：codota.com）。

标签： cssangularangular-material

解决方案

对话框 html 内的按钮在哪里？你不应该需要使用像900pxand之类的值420px。使其绝对相对于对话框容器（“白色”容器）定位，然后使用top:0;right:0；和translate(50%,-50%)。

它应该根据需要定位它。请参阅下面的快速示例

.dialog {
  position: relative;
  margin: 50px auto;
  width: 200px;
  background-color: black;
  height: 200px;
}

button {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}
<div class="dialog">
<button>X</button>
</div>

还要检查 stackblitz ->对话框 stackblitz。我在对话框面板中添加了一个类（组件文件中的“my-dialog”），并在全局样式文件中添加了 css，因为组件无法访问对话框容器/对话框面板。

推荐阅读