Угловой 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 -> диалоговое окно 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 или fixed, выМожно расположить кнопку с помощью следующего CSS:

.close-dialog-btn {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

Атрибуты right/top разместят кнопку в верхнем правом углу.Атрибут transform сместит его на половину собственной ширины вверх / вбок.

Также убедитесь, что нет никаких отступов непосредственно в элементе диалога, в противном случае вам, возможно, придется настроить атрибуты top/right.чтобы компенсировать это дополнение.