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

Подписаться 492 тыс.

Просмотров 45 тыс.

50% 1

🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/
💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/af...
Z-index is one of those CSS properties that causes a ton of frustration due to some strange rules. This tutorial explains how z-index works and how you can avoid four of the most common pitfalls when using it.
0:00 - Intro
1:19 -- Reason #1: Elements in the same stacking context will display in order of appearance, with latter elements on top of former elements
4:14 -- Reason #2: The element doesn’t have its position set
6:04 -- Reason #3: Setting some CSS properties like opacity or transform will put the element in a new stacking context
7:24 -- Reason #4: The element is in a lower stacking context due to its parent’s z-index level
Link to the Codepen projects mentioned:
codepen.io/collection/DQgoEr/#
_____________________________________
SUPPORT THE CHANNEL
⭐ Join channel members and get perks: / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: marketplace.visualstudio.com/...
WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: coder-coder.com/responsive/
🌟 Gulp for Beginners: coder-coder.com/gulp-course/
RECOMMENDATIONS
⌨ My keyboard-- get 10% off with code THECODERCODER -- vissles.com/?ref=mu96kxst5w
💻 Other gear -- www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- coder-coder.com/best-web-deve...
📺 My Favorite Courses -- coder-coder.com/best-web-deve...
🔽 FOLLOW CODER CODER
Blog -- coder-coder.com/
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#webdevelopment #coding #programming

Наука

Опубликовано:

3 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 82

@rohanburke2765 3 года назад

Can we just acknowledge how amazing this person is.

@kristiansigston3360 3 года назад

Yep. Acknowledged.

@kjmlucero 3 года назад

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 3 года назад

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

@stefangisi2490 4 года назад

Got it at #1 You saved me from another suicidal day of programming for FREE for MYSELF.

@istvantibortoth8395 3 года назад

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

@sharlene1176 3 года назад

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

@vladimir_dev 5 лет назад

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

@TheCoderCoder 4 года назад

Thanks so much Vladimir!

@SomogyiCosmin 4 года назад

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

@Hansly_rz 10 месяцев назад

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

@AhmedAlaa-nf3yj 2 года назад

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

@marco.arruda 4 месяца назад

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

@MacDude2020 4 года назад

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

@Rodrigo-ux6mr 2 года назад

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

@pedrolamb3713 3 года назад

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

@avgsteve 3 года назад

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

@kev_in7225 Год назад

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

@philipdratcliffe9648 2 года назад

really fun and clear explanation!

@yoshitaarora4240 4 года назад

Thanks a lot girl. This video is really helpful.

@andrew.schaeffer4032 Год назад

Great tutorial thanks!

@anne-sophieschwindenhammer4054 3 года назад

Thanks a lot, very helpul

@brinthkr1533 3 года назад

Awesome explanation !!!

@sujoyghosh7152 3 года назад

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

@andradedeguilherme 4 года назад

This saved me! Thanks

@Alex-bc3xe Год назад

Thank you it was veryyy helpful god bless you.

@theprovego2934 7 месяцев назад

Thank you!

@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!

@Ryuseynivnimoro3336 3 года назад

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

@danielmorales0917 3 года назад

I didnt know about this, thank you!

@kimbuchanan4671 3 года назад

Thanks, helped me solve an issue.

@SimonMarkHolland 3 года назад

Brilliant video, thank you.

@igurutechs2583 2 года назад

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

@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 😢

@vigneshwaranrenganathan7743 11 месяцев назад

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

@stevenha3752 3 года назад

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

@kristiansigston3360 3 года назад

Awesome. Thank you.

@f3abraham 3 года назад

Thank you very much!

@DannyM255 3 года назад

loved it, thanks.

@onlygiogi 3 года назад

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 4 года назад

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 4 года назад

Yeah! Thanks so much!

@FrontendZilla 6 месяцев назад

Good one❤

@voualla1397 2 года назад

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 2 года назад

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

@Viralvlogvideos 2 года назад

coder coder can u please make full course on css

@mmoplayah2874 3 года назад

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

@TheCoderCoder 3 года назад

great suggestion!

@i_am_funny 3 года назад

Hey ! Thaks for this video...

@chdrlz 2 года назад

Very nice!

@wayneswildworld Год назад

Amazing video

@solomsolom8338 4 года назад

thank you

@zahihmi9123 3 года назад

Thanks my problem is solved 😍

@mgonzalezbernal 3 года назад

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

@Phakeme-Fakazi 3 года назад

Thanks very much

@giovannimonares5419 4 года назад

Buenísimo muchas gracias!

@TheCoderCoder 4 года назад

Gracias!

@LabhamJain 4 года назад

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

@TheCoderCoder 4 года назад

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

@LabhamJain 4 года назад

@@TheCoderCoder Oh

@LabhamJain 4 года назад

@@TheCoderCoder That's So Cool!!!

@chasedonovan8937 Год назад

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

@aliasalias9768 3 года назад

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 3 года назад

Also I see a space for z index and css id

@mikewilliams1035 3 года назад

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

@felipemendes8156 3 года назад

Muitoooo obrigadooo

@hynong2 2 года назад

thx awe some

@riiadada5283 Год назад

I subscribe

@charlyRoot 4 года назад

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 4 года назад

haha thank you !

@charlyRoot 4 года назад

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

@piscineiroalves Год назад

Top

@steveotieno8441 2 года назад

Your'e smart

@mgrycz 2 года назад

leaving. the comment below

@ygjt76v0----- 3 года назад

Header posititon fixed and error , need z index 1000000000😂

@8fed 2 года назад

CSS is just pure garbage

@TheCoderCoder 2 года назад

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

@8fed 2 года назад

@@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 2 года назад

@@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!