Question: I want dialog box to have a close button which is on top right corner of dialog(half inside/half out) like the one in image : 

I am able to achieve this using absolute positioning but that is not a feasible option.

I want to position the button with reference to dialog, I also tried using `float:right` and giving `margin-top` in negative but the other half is hidden even on setting `z-index` to more than 1000.

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

```

[![Image](https://i.stack.imgur.com/vH6cy.png)](https://i.stack.imgur.com/vH6cy.png) (Courtesy :codota.com).

Answer: 
where is the button positioned inside the dialog html ? you shouldn't need to use values like `900px` and `420px`. Make it positioned absolute relative the the dialog container ( the ' white ' container ) and just use `top:0;right:0`; and `translate(50%,-50%)` . 

It should position it as you want. See quick example below

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

button {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}
```

```html
<div class="dialog">
<button>X</button>
</div>
```

also check stackblitz -> [dialog stackblitz](https://stackblitz.com/edit/angular-xe2z3l) .
I added a class to the dialog panel ( 'my-dialog' in the component file ) and added css in the global style file as the dialog container/ dialog panel are not accessible from the component.
You should position the button within the dialog which it should close:

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

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

```

Assuming, the `dialog-component` has a `position` of `relative`, `absolute` or `fixed`, you can position the button with the following CSS:

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

```

The `right/top` attributes will position the button in the upper right corner. The `transform` attibute will shift it half of its own width up/sideways.

Also, make sure there is no padding directly on the dialog-element, otherwise you may have to adjust the `top/right`-attributes to compensate that padding.