Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can i set zindex in typescript for angular 5

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;}
like image 938
Apple Orange Avatar asked Jul 23 '18 10:07

Apple Orange


People also ask

How do I use zIndex?

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).

How do you get the highest Z index?

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 How does it function?

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 ).


2 Answers

You might be better using inline style binding rather than using querySelector - depending on the situation

<p [style.z-index]="1">
  Some text
</p>
like image 102
Drenai Avatar answered Sep 25 '22 19:09

Drenai


You can use NgStyle directive for set zindex

[ngStyle]="{'z-index':condition ? 9 : 0 }"
like image 29
Gurpreet Singh Avatar answered Sep 25 '22 19:09

Gurpreet Singh