Angular 5：将按钮定位在垫子对话框外的一半

Question

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

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

我想参考对话框来定位按钮，我也尝试使用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）。

Answer 1

按钮位于对话框 html 内的什么位置？您不应该需要使用900px和这样的值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 -> dialog stackblitz。我向对话框面板添加了一个类（组件文件中的“my-dialog”）并在全局样式文件中添加了 css，因为对话框容器/对话框面板无法从组件访问。