# Perspective - Position Absolute - z-Index issue

**URL:** <https://forum.inductiveautomation.com/t/perspective-position-absolute-z-index-issue/55734>\
**Category:** Ignition\
**Tags:** ignition81\
**Created:** [February 3, 2022, 10:42pm UTC](https://forum.inductiveautomation.com/t/perspective-position-absolute-z-index-issue/55734 "2022-02-03T22:42:39Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![luc.martin](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@luc.martin](https://forum.inductiveautomation.com/u/luc.martin)\
**Post date:** [February 3, 2022, 10:42pm UTC](https://forum.inductiveautomation.com/t/perspective-position-absolute-z-index-issue/55734/1 "2022-02-03T22:42:39Z")

</div>

I’m on 8.1.14

Not sur if i’m OK with want I want to do, I try to put a side panel over an other by using the position absolute, I have a z-indez of 99 for the one that I want over the other and I got a dropdown object that keep over my z-index 99 ???

Panel Left:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/1/5161449f162f065e1ef8f068ccf3616a9b15b7a6.png)

Body:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/c/6c0634cf196a63a5f2d1af9fe8a9c0170270cfda.png)

Result:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/4/840188bda2d7f5874effd8477e9c6eb6be09c298.jpeg)

---

<div class="post-metadata">

**Author:** ![mperkins](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mperkins/32/71722_2.png) [@mperkins](https://forum.inductiveautomation.com/u/mperkins)\
**Post date:** [February 3, 2022, 11:32pm UTC](https://forum.inductiveautomation.com/t/perspective-position-absolute-z-index-issue/55734/2 "2022-02-03T23:32:21Z")

</div>

Unfortunately, with CSS, position absolute items are given new [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)

Without knowing the structure of the project and it’s intent, it’s hard to give you an easy answer for solving this.

A couple of suggestions since it looks like a docked view(side panel?). I’d avoid position absolute by:

1. having multiple docked views on the same side
2. or having a single embedded view docked and swap the paths for the embedded view

---

<div class="post-metadata">

**Author:** ![luc.martin](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@luc.martin](https://forum.inductiveautomation.com/u/luc.martin)\
**Post date:** [February 4, 2022, 12:16pm UTC](https://forum.inductiveautomation.com/t/perspective-position-absolute-z-index-issue/55734/3 "2022-02-04T12:16:30Z")

</div>

I want to get same result has the left docking.

I have a view with 2 columns, I want that the LeftMenu cover the Page.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/f/4fb83a7f54ce07e7683b90d3ef9f588eb7e71b32.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 4, 2022, 12:24pm UTC](https://forum.inductiveautomation.com/t/perspective-position-absolute-z-index-issue/55734/4 "2022-02-04T12:24:42Z")

</div>

Ignitions coordinate containers are already using position absolute.  
z-index basicly has no effect on nested containers with positions absolute…  
I would avoid using that inside flex containers.

The only place that doesnt use position absolutes is in a canvas. There you have full control of where everything gets placed. But its harder to work with.

You are better of making this left menu a docked view

---

<div class="post-metadata">

**Author:** ![luc.martin](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@luc.martin](https://forum.inductiveautomation.com/u/luc.martin)\
**Post date:** [February 4, 2022, 1:26pm UTC](https://forum.inductiveautomation.com/t/perspective-position-absolute-z-index-issue/55734/5 "2022-02-04T13:26:30Z")

</div>

I want to be able to force hide/show and with the docked view we can’t, only toggle is available and I can’t find how to know his state

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 4, 2022, 1:34pm UTC](https://forum.inductiveautomation.com/t/perspective-position-absolute-z-index-issue/55734/6 "2022-02-04T13:34:19Z")

</div>

If you set display onDemand  
you can open/close the dock with system.perspective.openDock(dockId) there is also closeDock and toggleDock

---

<div class="post-metadata">

**Author:** ![luc.martin](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@luc.martin](https://forum.inductiveautomation.com/u/luc.martin)\
**Post date:** [February 4, 2022, 1:35pm UTC](https://forum.inductiveautomation.com/t/perspective-position-absolute-z-index-issue/55734/7 "2022-02-04T13:35:49Z")

</div>

I know but I also want to have an automatic hide/show at breakpoint…

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 4, 2022, 1:39pm UTC](https://forum.inductiveautomation.com/t/perspective-position-absolute-z-index-issue/55734/8 "2022-02-04T13:39:49Z")

</div>

the openDock functin also still works if you set display to auto

---

<div class="post-metadata">

**Author:** ![luc.martin](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@luc.martin](https://forum.inductiveautomation.com/u/luc.martin)\
**Post date:** [February 4, 2022, 1:59pm UTC](https://forum.inductiveautomation.com/t/perspective-position-absolute-z-index-issue/55734/9 "2022-02-04T13:59:56Z")

</div>

I know, but the close unload the docked view and I only want to hide it

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 7, 2022, 7:31am UTC](https://forum.inductiveautomation.com/t/perspective-position-absolute-z-index-issue/55734/10 "2022-02-07T07:31:38Z")

</div>

you can set the icon to always show?
