CSS: 4 Reasons Your Z-Index Isn't Working
🔥 My course: Responsive Design for Beginners! https://coder-coder.com/responsive/
💻 Become a full-stack web dev with Zero to Mastery: https://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:
https://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: https://marketplace.visualstudio.com/...
WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: https://coder-coder.com/responsive/
🌟 Gulp for Beginners: https://coder-coder.com/gulp-course/
RECOMMENDATIONS
⌨ My keyboard-- get 10% off with code THECODERCODER -- https://vissles.com/?ref=mu96kxst5w
💻 Other gear -- https://www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- https://coder-coder.com/best-web-deve...
📺 My Favorite Courses -- https://coder-coder.com/best-web-deve...
🔽 FOLLOW CODER CODER
Blog -- https://coder-coder.com/
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#webdevelopment #coding #programming
