角度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，因为无法从组件访问对话框容器/对话框面板。

Answer 2

您应将按钮放置在应关闭的对话框中：

<dialog-component>
   Content... content.. content...

   <button mat-mini-fab class="close-dialog-btn">
     <i class="material-icons" (click)="close()">close</i>
   </button>
</dialog-component>

假设dialog-component具有position，relative或absolute的{​​{1}}，则可以使用以下CSS放置按钮：

fixed

.close-dialog-btn { position: absolute; right: 0; top: 0; transform: translate(-50%, -50%); } 属性会将按钮放置在右上角。 right/top服饰会将其自身宽度的一半向上/侧移。

此外，请确保对话框元素上没有直接填充，否则您可能需要调整transform属性以补偿该填充。