css - Angular 5 : Position a button half outside mat dialog

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 这样的值。使它相对于对话框容器('white'容器)绝对定位并且只使用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，因为无法从组件访问对话框容器/对话框面板。