CSS: 4 Reasons Your Z-Index Isn't Working

[@rohanburke2765]

Can we just acknowledge how amazing this person is.

[@kristiansigston3360]

Yep. Acknowledged.

[@kjmlucero]

Thank you for breaking these reasons down so clearly! Prior to this, I read through so much documentation so many times and still wasn’t able to get a clear understanding of what was happening 😔😔

[@TotallyAtRandom]

Thank you! This is the clearest explanation I’ve ever seen of z-index.

[@marco.arruda]

It's December of 2023 and you helped me! In my case, it was the *position: sticky;* that was placing its children elements underneath other elements. I needed to setup a higher z-index to the element sticked

[@vladimir_dev]

Very thorough, detailed and well-structured video about a seemingly simple topic. Great job!

[@TheCoderCoder]

Thanks so much Vladimir!

[@istvantibortoth8395]

Thank you! I just had the issue #4. I changed the z-value of the parent and everything worked as expected.

[@Hansly_rz]

as soon as i read the fourth one, I went to test it out, and it turned out to be the case. Thank you !

[@MacDude2020]

Z-index is something I'm just learning about. This video was very helpful. Thanks.

[@stevenha3752]

Z-index is a pain!! thank you so much

[@karolinajankowska453]

Thank you so much, I have spent so much time poking my head to understand why my component with z-index is not displaying.

[@TheCoderCoder]

thanks so much!!! I'm glad this could help you!

[@sharlene1176]

Super helpful! It perfectly explained a problem I was trying to resolve.

[@vigneshwaranrenganathan7743]

i can't remove the parent z index and also cannot move the element outside parent as well , is there any other solution

[@SomogyiCosmin]

Thank you very much for this video. I'm enlightened with the z-index issues.

[@kev_in7225]

Thanks so much! I wanted to start a new Project because I could not fix it, but I got it :D

[@yoshitaarora4240]

Thanks a lot girl. This video is really helpful.

[@Rodrigo-ux6mr]

Thanks a lot! Saved me after a lifetime trying to solve this! 🙏

[@andradedeguilherme]

This saved me! Thanks

[@pedrolamb15]

third day of working is going well!! thank you so much

[@sujoyghosh7152]

Thanks a lot... I was recently struggling with this problem in my project 😂

[@avgsteve]

really helpful and nails the problem took me hours to solve... thank you

[@Ryuseynivnimoro3336]

Thanks a lot. I fixed my error thanks to your video. :D

[@Viralvlogvideos]

coder coder can u please make full course on css

[@AhmedAlaa-nf3yj]

thank you so much that was really helpful, organized, clear are great you are an awesome instructor

[@anne-sophieschwindenhammer4054]

Thanks a lot, very helpul

[@mmoplayah2874]

If there's no way to edit the markup, force append that modal div outside the parent container using JS

[@TheCoderCoder]

great suggestion!

[@bellefleur2127]

Love u love u ❤❤❤❤ you’ve just helped me to solve a problem I had since 3days thank u thank u 🙏 Actually, I had the 3rd reason you mentioned 😢

[@philipdratcliffe9648]

really fun and clear explanation!

[@brinthkr1533]

Awesome explanation !!!

[@andrew.schaeffer4032]

Great tutorial thanks!

[@voualla1397]

Loved it, it solved a lot of my problems, thank you! Still I have an example where I don't find anything to make it work, and maybe it's just as I read everywhere because it's "impossible"... I have a tooltip inside a box. It is attached to a parent (parent => position : relative, tooltip => position : absolute). My z-index is not working if I don't use position : fixed on my tooltip, but then I'd have to calculate the position of my tooltip in JS... Do you know a way to make it work with only CSS?

[@rabindrajoshi9258]

Use Isolation to force new stacking context, this might help. Else, you'll need to re-think the layout (or handle with javascript). developer.mozilla.org/en-US/docs/Web/CSS/isolation

[@igurutechs2583]

Thank You soooo much, #2nd thing happened with me... got it from your video, Thanks again✌✌👍

[@chasedonovan8937]

thanks, i think u saved me from losing my job :)

[@danielmorales0917]

I didnt know about this, thank you!

[@computewitharjun]

#2( 00:42 ) work for me thanks :)

[@SimonMarkHolland]

Brilliant video, thank you.

[@solomsolom8338]

thank you

[@kimbuchanan4671]

Thanks, helped me solve an issue.

[@f3abraham]

Thank you very much!

[@kristiansigston3360]

Awesome. Thank you.

[@onlygiogi]

Thank you for this amazing video! I've only a problem and I don't know why but I think anyone can't help me so it doesn't matter: In localhost the z-index of my "go-to top" button works but when I upload files online it doesn't work...

[@leon1985ist]

I had same problem I working in my first website for my sister and I try put opacity to a background image, but I had

[@TheCoderCoder]

Yeah! Thanks so much!

[@zahihmi9123]

Thanks my problem is solved 😍

[@YolkBytes]

loved it, thanks.

[@i_am_funny]

Hey ! Thaks for this video...

[@wayneswildworld]

Amazing video

[@Phakeme-Fakazi]

Thanks very much

[@FrontendZilla]

Good one❤

[@chdrlz]

Very nice!

[@name1483]

Thank you!

[@TheCoderCoder]

thank you!

[@charlyRoot]

I need to watch this over and over until I can lipsync it, but 2 years ago. Then I will have not lost 132.7 hours of my life.

[@TheCoderCoder]

haha thank you !

[@charlyRoot]

If I win the lottery I'm going to over pay you to be my boss.

[@giovannimonares5419]

Buenísimo muchas gracias!

[@TheCoderCoder]

Gracias!

[@LabhamJain]

@@TheCoderCoder Wait What!! I Thought English Is Your Mother Language... 😲😲😲

[@TheCoderCoder]

@@LabhamJain it is, but I know a little bit of Spanish 😊

[@LabhamJain]

@@TheCoderCoder Oh

[@LabhamJain]

@@TheCoderCoder That's So Cool!!!

[@mgonzalezbernal]

thanks, you really helped me !! :) +1 suscriptor !!!

[@aliasalias9768]

Can you please help me with one of my problems, I created a new header on my website but with a plug-in called elementor header footer and blocks so after I did this I had to add a new menu bar within the plug-in which looks great just like how it did before but when I created a sub page for one of my pages it won’t work I see the drop down icon on the page but no sub page I think it’s a z index issue but not sure the website is beautyonthemauve.com

[@aliasalias9768]

Also I see a space for z index and css id

[@felipemendes8156]

Muitoooo obrigadooo

[@riiadada5283]

I subscribe

[@mgrycz]

leaving. the comment below

[@gearboxworks]

Excellent tutorial, thank you. Nothing else to say, except to note that you do like cats! 🙂

[@hynong2]

thx awe some

[@steveotieno8441]

Your'e smart

[@ygjt76v0-----]

Header posititon fixed and error , need z index 1000000000😂

[@piscineiroalves]

Top

[@8fed]

CSS is just pure garbage

[@TheCoderCoder]

Sorry to hear you hate CSS. What makes you feel that way?

[@8fed]

@@TheCoderCoder Sometimes my own stupidity. I spent multiple hours trying to figure out why does my dropdown menu not follow the normal stack order and fix the issue, only to find out that it does indeed follow the stack order and merely has a transparent background leading to it appearing to be beneath a non positioned element. But mostly the fact that it behaves in an arbitrary way.

[@TheCoderCoder]

@@8fed it definitely can seem very arbitrary! I've been working with it for a while and still get stuck on weird things. Hope you're able to figure out your issue!

[@AlejandroChavezV]

Thanks a lot!!!

[@theprovego2934]

Thank you!