I am trying to set zindex
for a class using typescript. But it is not working. If you have any idea, please share with me.
ngOnInit() { (<HTMLElement>document.querySelector('.pagemode')).style.z-index = 1;}
Definition and UsageAn element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
The maximum range is ±2147483647. In CSS code bases, you'll often see z-index values of 999, 9999 or 99999. This is a perhaps lazy way to ensure that the element is always on top.
What is a Z Index? Z Index ( z-index ) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute , position:relative , or position:fixed ).
You might be better using inline style binding rather than using querySelector
- depending on the situation
<p [style.z-index]="1">
Some text
</p>
You can use NgStyle directive for set zindex
[ngStyle]="{'z-index':condition ? 9 : 0 }"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With