Angular z-index not working for fixed position drawer inside child component due to parent stacking context

2 weeks ago 15
ARTICLE AD BOX

Update, My bad!, I confused between fixed and sticky, so forget this answer

A position fixed is related to the div that contains the div

As aside is inside dynamic-form-drawer, you can not get it in this way

I imagine the solution is that the app-context-icons have a position absolute and z-index less than 0

Then app-manage-menu-list will be "over" [app-context-icons], so, to you can "click" in the icons, you need app-mannage-menu-list will be a width=0

NOTE: I'm not pretty sure that work

//in your "context-icons-tabs.css" [app-context-icons-tabs] { position:relative; } [app-context-icons] { position:absolute; z-index:-1 } [app-manage-menu-list], [dynamic-form-drawer] { width:0; //else your icons are not "clickable" }

NOTE: See that you can use as selector of .css the angular "tag"

Eliseo's user avatar

3 Comments

A position fixed is related to the div that contains the div - Er, no. position:fixed is related to the viewport.

2026-02-26T13:09:32.48Z+00:00

::glups::, I read "sticky", sorry (and thanks for the advise)

2026-02-26T14:22:48.847Z+00:00

Yes, 'normally' position: fixed is related to the viewport, but there may be an intervening containing block which would make the fixed relative to that.

2026-02-26T16:07:01.243Z+00:00

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.

Read Entire Article