Solve your z-index issues | z-index and stacking context explained

  Рет қаралды 56,132

Kevin Powell

Kevin Powell

Күн бұрын

Пікірлер: 122
@centrumsaiyan7623
@centrumsaiyan7623 2 жыл бұрын
The moment I realised I haven't fully understand z-index, I immediately came to KZbin and typed 'Z-index kevin powell'. That's how much of trust and respect I have for this man.
@joannehughes6082
@joannehughes6082 2 жыл бұрын
me too!!🙂
@centrumsaiyan7623
@centrumsaiyan7623 2 жыл бұрын
@@joannehughes6082 Wish you will become a senior soon. All the best.
@June-c2q
@June-c2q 2 жыл бұрын
Same
@DipanGhosh
@DipanGhosh 2 жыл бұрын
That trust is well placed.
@bzygauksei
@bzygauksei Жыл бұрын
@@centrumsaiyan7623 are u one ?
@AndHunt777
@AndHunt777 4 жыл бұрын
Kevin, thanks for the explanation of z-index! P.S. The beginning of the tutorial will have been less confusing if you gave descriptive class names to the boxes (divs) you were stacking. E.g. box-red, box-green, and box-purple will have been easier to keep up with than box-1, box-2, box-3 where we have to try and remember which color was assigned where.
@KevinPowell
@KevinPowell 4 жыл бұрын
Yeah, looking back at it, I 100% agree
@abhaykumar9806
@abhaykumar9806 Жыл бұрын
Thanks a lot for this video. i come back to this video again and again. And everytime it is for a new use-case. This time it was for increasing the z-index of scrollbar thumb for a table content. The concept never gets old.
@smerfu8734
@smerfu8734 4 жыл бұрын
I was struggling with that for 2 hours straight. Really great tutorials and teaching couch, you make the internet more beautiful man
@TokyoNerd
@TokyoNerd 3 жыл бұрын
I'm in the process of building my own website in which I'd like to eventually use to start my own business. I have no previous experience of using HTML, CSS, or any other form of web coding, so I'm learning everything from scratch as I create the content for my website. I'm looking to create a blog, and I've run into many problems that occur with the z-index, particularly when coding the menu bar. This video has helped me to solve a MAJOR issue with the menu bar. It was an easy-to-understand video and I know have more freedom to build the website that I'm looking to build. Thank you for creating this video.
@MD-nt9nv
@MD-nt9nv 4 жыл бұрын
Very well explained. Maybe, instead of box-1, box-2, box-3 etc. Try box-red, box-blue, box-orange. I kept going back and forth trying to connect which boxes numbers were which colors. The class names would be more self evident and self explanatory. Thank you for your videos!
@oyerindedaniel7977
@oyerindedaniel7977 4 жыл бұрын
Me too
@nurulhudaapon
@nurulhudaapon Жыл бұрын
Reason I'm having to switch from this tutorial. 😞
@bencetullner1964
@bencetullner1964 2 жыл бұрын
Actually position fixed and sticky are creating a new stacking context without the z-index (with the initial value) according to MDN docs.
@sallaklamhayyen9876
@sallaklamhayyen9876 6 жыл бұрын
I encourage you to continue focusing on misunderstood concepts li Block Formatin Context Thank you
@iliAsghar
@iliAsghar 8 ай бұрын
well I'm a bit late to the party, but THANK YOU literally the best explanation of stacking .
@rickyu1978
@rickyu1978 5 жыл бұрын
This helped me, i had my modal component inside a child div, and was very confused as to why the modal would appear behind other components! stacking context u got me. thanks kev.
@life8261
@life8261 2 жыл бұрын
Finally, thanks to your video I have understood a problem in my pet project. Thank you, Kevin!
@CarAudioInc
@CarAudioInc 3 жыл бұрын
You know you've spent too much time on the internet as an American when hearing 'zed' doesn't faze you anymore lol great vids Kev as always.
@jugibur2117
@jugibur2117 5 жыл бұрын
Thanks for your explanations! Helped me alot. My problem was the stacking context because of positioning an pseudo element *under* the element itself. Found that decreasing the z-index on a wrapper fixes the problem of the new stacking context: .wrapper-around-element { position: relative; z-index: 0; } .element { position: relative; z-index: 1; } /* Set pseudo element one level down */ .element span::before { content: ""; position: absolute; z-index: -1; background: red; top: 0; right: 0; bottom: 0; left: 0; height: 1em; }
@likes_to_travel
@likes_to_travel 2 жыл бұрын
Very good example! Thank you! And even as a CSS newb I understood what you were aiming at. I have 2 problems: When stacking, 1. How do I make text wrap around the stacked item, e.g. an image? Like if your example boxes were bigger and one of them had text inside them? 2. How do I prevent other elements further down on my page from moving up and chiming in on stacking behavior as well?
@simeongeorgiev1107
@simeongeorgiev1107 4 жыл бұрын
Thank you so much for helping people like me. Although I read the article in MDN about z-index even before I watched the video and I really thought I understood I found out parts that really I didn't understand! So thanks again
@cainabel2009
@cainabel2009 2 жыл бұрын
Wow, that really made me understand Z-indexes a lot.
@katty4682
@katty4682 6 жыл бұрын
Thank you!!!!!!!!! I've run into this so many times!
@sergey_c
@sergey_c 11 ай бұрын
Thank you for such detailed description with examples!
@subham-raj
@subham-raj 2 жыл бұрын
*PRO TIP:* Search about react portal and the concept will help you with modal, popovers and dropdowns with any framework :)
@mdtausifiqbal
@mdtausifiqbal 3 жыл бұрын
really, this is very helpful video regarding stacking context, and very helpful for beginners like me. very clean understanding after watching this video. Thanks for this video.
@Joe-hj5hs
@Joe-hj5hs 3 ай бұрын
Can you make a video where the portfolio items would be on top of the overlay as well? I need to figure out how to have the portfolio items stack on top of the overlay. I'm using react components as well which makes the layering of components complicated. Thanks for the video!
@b5a5m5
@b5a5m5 5 жыл бұрын
Waiting to get to the part where you actually explain what a stacking context is. I'm at 8:45. You keep talking about it, but have yet to explain what it is :| I may have missed it? It finally all came together at the end though. A stacking context is like a tree. Anytime you apply a z-index to a element, the element gets inserted into the tree. Its position in the tree is as a child of the closest stacking context containing element in the dom ancestors. Sort of the same way that when you absolutely position an element, its position is relative to the closest positioned ancestor element in the dom. So now this z-indexed element (element A) will interact with other children of the stacking context it belongs to, but, since applying a z-index creates a stacking context for element A, any descendants of the element A will be relative to the its stacking context as its own flattened layering system. Meaning element A's siblings in its containing stacking context cannot get in between the descendants of element A. If you wanted to do that you'd have to remove any css properties that gives element A a stacking context (like the z-index property) and now all the descendants will be in the same context element A used to be in and are free to shuffle around with the siblings in that stacking context.
@KevinPowell
@KevinPowell 5 жыл бұрын
Sorry it took so long to get there! I felt that I needed the preamble to properly explain it.
@vcoski
@vcoski 4 жыл бұрын
This video was very informative. Thank you.
@GasparZumbiehl
@GasparZumbiehl 2 жыл бұрын
Great explanations thank you !!! But position fixed creates a stacking context without the need of a z-index value (unlike position relative) ;) 06:25
@zubayer1093
@zubayer1093 3 жыл бұрын
It is also working, Please guide me if this is the wrong way. .about { background: var(--clr-accent); position: relative; z-index:-500; transform: translateY(-10em); padding: 10em 5em 5em; }
@seemsas
@seemsas 6 жыл бұрын
Thank you. I had it several times, when I didn' get it why it didn't work as I wanted.
@KevinPowell
@KevinPowell 6 жыл бұрын
Glad that this helped!
@pfever
@pfever 2 жыл бұрын
6:14 renaming the classes as .box-one -> .box-red, .box-two-> .box-green, .box-three-> .box-purple, would make it easier to reason about the code :)
@sumankathet2560
@sumankathet2560 6 жыл бұрын
Waiting to continue the svg series 😉😉
@KevinPowell
@KevinPowell 6 жыл бұрын
Soon!
@waasnoode986
@waasnoode986 5 жыл бұрын
Thank you! Explaining the positioning helped me out big time 😊
@IprahemYT
@IprahemYT 3 жыл бұрын
شكرا علي الترجمه ❤
@chriskasatka2095
@chriskasatka2095 3 жыл бұрын
I only say 'zed' when referring to the ZX Spectrum👌.
@israelpelayo3603
@israelpelayo3603 2 ай бұрын
Thanks man you get on the point
@mrabhijitrabha
@mrabhijitrabha Жыл бұрын
For better understanding you should have used the class name of the boxes based on the color of it.
@2carragher
@2carragher 7 ай бұрын
thanks for explaining it so good 👍
@mathiasmatanda8848
@mathiasmatanda8848 6 жыл бұрын
Welcome back Kevin and thanks for clarifying to me the Z-index just a question about something else, what code do you use or how do you bring the node command line into your VS code terminal text editor just as you did it when building the portfolio project? you were not switching in and out of VS code but watched everything in the VS code the terminal
@devmrin
@devmrin 6 жыл бұрын
You can use VS Code's built in terminal - just hit (control) + (~) together. Or alternatively search for Toggle Integrated terminal in the menu on the top.
@mathiasmatanda8848
@mathiasmatanda8848 6 жыл бұрын
Thanks for your concern M.Mukherjee, in fact I'm asking for ways to use things like gulp from the VS code terminal than switching in and out of VS code,
@KevinPowell
@KevinPowell 6 жыл бұрын
As Mrinmay mentioned control + ~ will open the terminal, and then you can keep working like you would in a seperate terminal, using gulp or anything else you'd like.
@cap.blue-97sama99
@cap.blue-97sama99 3 жыл бұрын
Great explanation!!
@devmrin
@devmrin 6 жыл бұрын
Thanks Kevin! Very informative.
@gopikrishnan7380
@gopikrishnan7380 4 жыл бұрын
Thank you. Helpful for me.
@mortykai723
@mortykai723 3 жыл бұрын
Awesome video and explanation. I love your videos and teaching style. Say you wanted some other effect on the .about div and needed transform but still wanted it beneath .portfolio. You could give the .about div position: relative and z-index: -1 and that would work also. It would also not impact anything that came after the .about.
@satishmaurya2089
@satishmaurya2089 3 жыл бұрын
thanks a lot sir, for this awesome video
@dildgemckenzie8597
@dildgemckenzie8597 6 жыл бұрын
This is great Kevin.
@clevermissfox
@clevermissfox Жыл бұрын
How do translate , rotate, scale , skew work in terms of stacking context now that they aren’t attached to the transform property and are their own properties?
@limmeh7881
@limmeh7881 4 жыл бұрын
I'm trying to make a periodic table. I have a section which contains the periodic table (18 columns), and each column has some number of elements.When I hover over an element I'd like it's icon to expand, but when I do this it pushes the elements to the right away as it expands, rather than expanding over them. I'm still very confused but I'll try some of these tricks. Edit: so I realised the pushing happened because of relative positioning, I tried absolute positioning with left offset and it works except for when I do the last column everything goes to the top of the page.
@blahdelablah
@blahdelablah 6 жыл бұрын
Great video. Took me a couple of watches to truly get it, but I think part of that was that I found the basic idea hard to get my head around. Just one question, on the final example, if you had kept the transform on the about section, could you have used a negative z-index value to bring it behind the portfolio items, or is the z-index only going to work if the it's has a non-default position property set?
@devmrin
@devmrin 6 жыл бұрын
Try to understand that the most important thing here is the stacking context. Followed by z-index. z-index is all but value for comparison. case 1: if a and b are siblings a(z-index)= 1000 b(z-index) = 1 then a> b similarly if a(z-index)= 1 and b(z-index)= -1000 then too a>b case 2: if a and b are siblings and c is a child of b and a has a higher z-index than b. the the value of z-index of c is futile.
@blahdelablah
@blahdelablah 6 жыл бұрын
I just tested one of my theories using the CodePen that Kevin shared in the video description, and it worked. To get the negative z-index to work on the about section, whilst still using the transform, you just have to set position to 'relative'. That way the stacking context for the about section can be positioned behind the figures.
@KevinPowell
@KevinPowell 6 жыл бұрын
As you tested (always a great way to learn!), It works 😁. As you mentioned, it's moving that below the other section, so it's stacking context is still unique, but it's all below the others. Always more than one way to solve these things with CSS
@b5a5m5
@b5a5m5 5 жыл бұрын
@@devmrin unless b doesn't have a stacking context, then essentially a and c will become siblings in their parent stacking context.
@ankit65668
@ankit65668 Жыл бұрын
Hello Sir, In code above I want to place leftButton1 and rightButton1 on left and right corner with background transparent and images should be below these two. Also, I do not want to use absolute positioning. How it will be done?
@user-yd4bk1ev9o
@user-yd4bk1ev9o 6 жыл бұрын
haha I was just reading about this the other day! Great job Kevin!
@KevinPowell
@KevinPowell 6 жыл бұрын
Thanks 👍
@nathancornwell1455
@nathancornwell1455 5 жыл бұрын
im just confused because in this video applying z-index:1000 puts box-5 back on top but if you look at the codepen , that's not working ..box-6 is still on top .
@nathancornwell1455
@nathancornwell1455 5 жыл бұрын
if you add position:relative to box-5 that puts it back on top but just saying the way you have it in the video is not working...so , this video is a year old so im not sure if something changed in the way stacking context works or what...
@josipbjezancevic5697
@josipbjezancevic5697 Жыл бұрын
Yes, very strange. I don't know how that worked without positioning the box... A possible explanation is that Codepen didn't save the opacity of .5 on .box-6, it got stuck on 1. Weird that Kevin didn't notice that. :D Nonetheless, good work by Kevin.
@bloc-notes6751
@bloc-notes6751 5 жыл бұрын
Vraiment interessant, merci !!!
@KevinPowell
@KevinPowell 5 жыл бұрын
De rien :D
@hortusdeescapismo
@hortusdeescapismo 3 жыл бұрын
Thank you
@_volvic
@_volvic 6 жыл бұрын
Amazing thank you. This been a problem a couple of times for me haha
@KevinPowell
@KevinPowell 6 жыл бұрын
I just ran into an issue with this myself. Frustrating when it happens, but it's nice to know what's causing it :)
@berliandro
@berliandro 6 жыл бұрын
Finally! the answers
@chrismachabee3128
@chrismachabee3128 6 жыл бұрын
Thanks, I kind of a fan of z-index.
@KevinPowell
@KevinPowell 6 жыл бұрын
No problem 👍
@RafaelJaureguiCaball
@RafaelJaureguiCaball 2 жыл бұрын
What kind of software are you using to do your side by side coding with the viewing window?
@lllllllllIIIIIIIIIIl
@lllllllllIIIIIIIIIIl 5 жыл бұрын
Thank you!
@fersahahmet9597
@fersahahmet9597 5 жыл бұрын
i think i found out why we need to use the scale value other than 1 in order to create a new stack. Because 1 is default. Browser's engine looks at your code sees "scale(1)" and does nothing because it is already 1 . But if the engine sees .9 (or something other than 1) it pull out the node apply scale over that node put it back so this creates a new stack. What do you think ? i am right?
@KevinPowell
@KevinPowell 5 жыл бұрын
At 7:31 the scale(1) does create a new stacking context...
@fersahahmet9597
@fersahahmet9597 5 жыл бұрын
sorry my bad. I meant to talk about "opacity:1". scale (1) does create a new context because initially, transform object is undefined. If you define a transform namely "scale (1)" which is not default. It also defines a new context
@pratikkore7947
@pratikkore7947 4 жыл бұрын
does z-index: unset; remove any stacking context created by another previous ruleset? would it be a good idea to use .some-container * {z-index: 0;} to enforce strict stacking and then z-index: unset; to grant rogue permissions to children?
@KevinPowell
@KevinPowell 4 жыл бұрын
That would be cool, but sadly there is no way to escape a stacking context. Unset would just reset that z-index to the default.... which I'm guessing is 0.
@pratikkore7947
@pratikkore7947 4 жыл бұрын
hmm, ok, thanks 🙂
@Boobouh
@Boobouh 4 жыл бұрын
Thank you! really!
@markccteh6675
@markccteh6675 6 жыл бұрын
This is awesome.
@MeliusMundo
@MeliusMundo 2 жыл бұрын
Thanks!
@KevinPowell
@KevinPowell 2 жыл бұрын
Thank you so much (and sorry for missing this until now!)
@ajotel94
@ajotel94 9 ай бұрын
Very valuable! Thanks!
@devmts
@devmts 4 ай бұрын
thanks
@linusang
@linusang 4 жыл бұрын
chrome doesn't honor the "z-index: 1000" on box-5. firefox works fine though
@andreistein2429
@andreistein2429 5 жыл бұрын
You saved my life😄
@nickwoodward819
@nickwoodward819 5 жыл бұрын
Really stuck with the stacking context and pseudo elements when making a .card item with a banner that looks like it wraps behind and to the left I know you've made a tutorial on it, but I can't for the life of me find it. It's a shame chrome dev tools can't make the context more obvious
@valeriousmonk654
@valeriousmonk654 3 жыл бұрын
Funtastic
@mouradtulimat
@mouradtulimat 2 жыл бұрын
hi master kevin OwO I'm having trouble understanding why animation-fill-mode ruins my z-indexing, and so far all the articles I read only gives alternative solutions, but they never explain why this is happening or why it's wrong to use z-indexing with animation.. hope you can somehow help me with this
@xerxius5446
@xerxius5446 5 жыл бұрын
Holy Crap! I feel like an idiot now, never knew this
@tomatopotato6795
@tomatopotato6795 Жыл бұрын
This video would have been easier to understand if instead of box one, box two , box three . The box-colors would have been used.
@farhanawan9956
@farhanawan9956 5 жыл бұрын
one mistake you did insted using number id u need to use there name red green ....
@KevinPowell
@KevinPowell 5 жыл бұрын
What's wrong with using numbers? It's just a demo, I wouldn't use names like this on a real project (or even go with red, green, etc either as the color could change!)
@definty
@definty 3 жыл бұрын
Should of given the class names the color of the box instead of a random name
@shubhamtarkar38
@shubhamtarkar38 6 жыл бұрын
can you make bootstrap 4 tutorial???
@KevinPowell
@KevinPowell 6 жыл бұрын
I've made one site with Bootstrap 4, though at the time it was in beta so things changed a little since. I probably won't be looking at it again
@philippetorgue3783
@philippetorgue3783 2 жыл бұрын
le problème c'est qu'il y a deux difficultés : comprendre le stacking context et comprendre....la voix anglaise.
@georgepu
@georgepu 2 жыл бұрын
z-index used with transform should not affect the stacking order.
@techtipsuk
@techtipsuk 6 жыл бұрын
Definitely zed
@FirdavsiGameDev
@FirdavsiGameDev 5 жыл бұрын
Z index is pain
@miffy128
@miffy128 Жыл бұрын
2:38
@iliAsghar
@iliAsghar 8 ай бұрын
oh yes i agree!!
@dimkir100
@dimkir100 5 жыл бұрын
Man, you should have referred to them as 'purple box' / 'green box' etc... You would have avoided sentences like 'box 1 has index of 2 and 2 has index of 1'...
@KevinPowell
@KevinPowell 5 жыл бұрын
That would have been much smarter of me :\
@dimkir100
@dimkir100 5 жыл бұрын
well it’s hard to think of all details when you are actually doing the hard job recording a video :) but it’s still amazingly well explained!
@Pareshbpatel
@Pareshbpatel 6 ай бұрын
{2024-05-15}
@shariquekhanoriginal
@shariquekhanoriginal 6 жыл бұрын
M making a search engine for my project by jquery filter function but I want the searched keywrod to be highlighted with the content ex: if i search 'asp' it wil come aspirin but i wnt more in that asp should be highlighted
@KevinPowell
@KevinPowell 6 жыл бұрын
Highlighted over other possible options?
@shariquekhanoriginal
@shariquekhanoriginal 6 жыл бұрын
Kevin Powell no highlight over the input from the content
@pasizdobrekuce
@pasizdobrekuce 7 ай бұрын
"zed" is proper English.
@TechnologyBudda
@TechnologyBudda 9 ай бұрын
Tomato, tomaato; z, zede, Canada, US Minor
@elkhanhamet2561
@elkhanhamet2561 2 жыл бұрын
thank you
Flexbox is more complicated than you thought
22:42
Kevin Powell
Рет қаралды 154 М.
STACKING CONTEXT in CSS, Simplified | Solving Z-INDEX problems
17:19
Deeecode The Web
Рет қаралды 2,4 М.
Disrespect or Respect 💔❤️
00:27
Thiago Productions
Рет қаралды 42 МЛН
Players vs Pitch 🤯
00:26
LE FOOT EN VIDÉO
Рет қаралды 132 МЛН
Hoodie gets wicked makeover! 😲
00:47
Justin Flom
Рет қаралды 132 МЛН
5 super useful CSS properties that don't get enough attention
16:23
Kevin Powell
Рет қаралды 148 М.
A new approach to container and wrapper classes
25:27
Kevin Powell
Рет қаралды 268 М.
You probably want position: sticky instead of fixed
15:55
Kevin Powell
Рет қаралды 71 М.
My top 5 most popular front-end tips
22:07
Kevin Powell
Рет қаралды 61 М.
14.  Understanding the Stacking Context
5:54
Vladimir
Рет қаралды 3,6 М.
5 simple tips to making responsive layouts the easy way
15:54
Kevin Powell
Рет қаралды 777 М.
Flexbox design patterns you can use in your projects
15:33
Kevin Powell
Рет қаралды 444 М.
CSS Popover + Anchor Positioning is Magical
20:44
Kevin Powell
Рет қаралды 26 М.
Please stop using px for font-size.
15:18
Coder Coder
Рет қаралды 239 М.
Z-index CSS Tutorial ( Position and Stacking Order )
11:13
techsith
Рет қаралды 62 М.
Disrespect or Respect 💔❤️
00:27
Thiago Productions
Рет қаралды 42 МЛН