CSS Positioning Tutorial #11 - Z - Index & Stacking Order

Подписаться 1,4 млн

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

50% 1

Yo ninjas, in this CSS positioning tutorial, I'll show you how to use the z-index property to control the stacking order of elements on a web page.
SUBSCRIBE TO CHANNEL - / @netninja
========== JavaScript for Beginners Playlist ==========
• JavaScript Tutorials f...
========== CSS for Beginners Playlist ==========
• CSS Tutorials For Begi...
========== HTML for Beginners Playlist ==========
• HTML Tutorials For Beg...
========== The Net Ninja ============
For more front-end development tutorials & to black-belt your coding skills, head over to - / @netninja or thenetninja.co.uk
========== Social Links ==========
Twitter - @TheNetNinja - / thenetninjauk

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

4 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@ankittiwary3712 8 лет назад

every concept has its own complexity and depth but it just need a genius to understand it simplicity and you are genius for me you are exceptional . teaching is an art and this art is justified by you ...............

@NetNinja 7 лет назад

Thanks so much for the nice comment!

@nicolasvillafan 7 лет назад

Ankit Tiwary i agreedto

@baixartv 7 лет назад

+Ankit Tiwary took the words out of my mouth... congrats ninja and thank you!!

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

I am 40 years old, and 25 years ago when I started learning programming, I did it all by reading books. I took forever... I stopped programming 10 years ago, but I've always missed it. I wanted to go back to it, but I dreaded learning web programming again, because a lot has probably changed while I was out. But learning by RU-vid is so much easier! And your video's have really helped me, because they are the best! Thanks.

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

Thanks so much, and awesome that you didn't give up :)

@TheAlexanderEdwards 7 лет назад

The first minute of this video solved a problem I've been wrestling for hours. You are the man! Keep up the great work. :)

@piratedvirus 7 лет назад

dude helped a lot ..... facing a problem since hours.......solved in minutes !

@drcl7429 7 лет назад

I hope you are making money out of all this great work. Your explanation of all the CSS concepts is the most succinct and easy to follow that i have found. No need to rewatch anything. First time and I get it. Proper explanations for what is going on with each attribute and why its there. Why others make it so complicated I have no idea. Massive thanks for all your work.

@wayne3194 7 лет назад

after stucking in the layout of html for some time, I saw this playlist, wow, bro, you are my saver, ty very very much

@hobobmo 6 лет назад

This entire tutorial was very helpful and easy to understand. Thanks!

@alexandrugrecov8964 7 лет назад

you make all to be so easy to understand, thanks for that master ninja !

@niddaaa1233 6 лет назад

excellently explained. I'm in awe of your teaching skills!!!!

@iambinary 7 лет назад

You are genius. Nice tutorials. Cleared my concepts. Thank you!

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

i very like your simple explanations. that's very easy to be learned.

@msqrtech 8 лет назад

Very clearly put. Thank you!

@akshitchoudhary2973 7 лет назад

It is so clear. thanks man..!

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

This is some amazing stuff right here!

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

Thanks for your generous explanation

@ismaylmalik3445 5 лет назад

finally I understood z-index :) Good job mate!!!!!

@Samconery Год назад

Thank you so much for this. Its been so many years I had a confusion on this. Finally your explanation helped me

@NetNinja Год назад

You're very welcome! Glad it was helpful :)

@Gruximillian 8 лет назад

Hi! Your videos are great! Althoguh I know most of the things you are teaching here, I found that your simple and clear aproach is clearing some fog in my understanding of these techniques. A small notice about that image of coordinate axes: since on a web page y-axis is actually pointed downwards, you could just point that out so people that who are new to this don't get confused. Anyway, great tutorials, I watched and psd 2 wordpress too and it's awesome. Looking forward to videos on responsive design.

@NetNinja 8 лет назад

+Gruximillian Awesome point, definitely worth pointing out. Thanks for the kind comments also, glad you like the vids :).

@leonelleonardis9564 День назад

You are a legend, mate!!!

@cheriecheung4164 5 лет назад

i don't find it that confusing at all. but I believe it's because you did a great job in explaining to us what's really happening.... i'd have been so lost otherwise. thank you so much!!!!!

@triltyler3340 5 лет назад

This is a great tutorial.

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

I really like your Ninja Style. It's so cool :)

@tenzin321t 6 лет назад

i watched your other videos as well and i have come to a conclusion. and that is.....you are aaaaaaaaaaaaaaaaaaaaaamazing!!! thank you!

@NetNinja 6 лет назад

Haha, thanks so much :D

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

Didn't know that z-Index is only valid for comparison on the same "level". Thanks for that.

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

great work.

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

great explanation!!

@coldsummersky69 8 лет назад

This guy is great

@NetNinja 8 лет назад

+Dany Han Cheers, glad you like :)

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

Amazing video!! I have a question though, how can I stack any element to the bottom of the stack for a dynamically generated page?, which means I cannot assign z-index property to any other components.

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

Boss as Always :D

@Mustafa-cv1pk 5 лет назад

thank you))

@batyr71 7 лет назад

God bless you

@zacmuturi4522 3 месяца назад

Yep back for the whuaaaaa!!

@gajanankhatke281 8 лет назад

thanks

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

Would it be correct to say that when you moved the nav bar code to the top of the document, the only reason the banner went on top of the nav bar was because position absolute gave it priority? Since everything had a default z-index of 0 in this case.

@bakarock90 6 лет назад

Y-axis is always inverted in computer world, LOL. Can I use the music as ringtone? Kinda cool😊

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

I had never heard about this

@srajantewari1999 6 лет назад

Seriously The Net Ninja you are great even more than codecademy Really you are great

@NetNinja 6 лет назад

Thanks so much :)

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

If the z-index is by default 0, when you write position: relative shouldnt it "stay" 0? nav should still overlap it cause its z-index is 1 relative to the parent "body"

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

the tutorial was very helpful, but for some reason when I replaced the nav tag on top of the other tags as you did, the nav list still *stacked correctly* in the browser, Why is that?

@johnn4314 5 лет назад

good

@MsLaDiiShOrTy 7 лет назад

hey so idk if anyone can help me i need to finish this by tomorrow and im trying to get the divs to connect to the navigation menu. so like if i click home it goes to home and if i click about me it goes to about me. so what is happening is it goes to where it needs to go but isnt overlapping the divs its just going underneath the other... how can i fix this?

@aruprakshit7218 7 лет назад

Where I can get the exercise files?

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

For some reason when I replaced the nav tag above the other tags as you did, the nav list on the browser still stacked properly and didn't need the z-index property to do anything. Why is that?

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

Positions:absolute??

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

I Like Your Channel Name Buddy

@francisanthonyvillarin3663 5 лет назад

i am using notepad++, what programming tool you are using sir?., thank you

@NetNinja 5 лет назад

In this series, I user Brackets :)

@Nashiuz Год назад

I hope you are making money out of your channel because you deserve it

@NetNinja Год назад

Thanks for your support Nashiuz!

@Nashiuz Год назад

@@NetNinja You're most welcome!

@firstnamelastname7248 5 лет назад

I consider z-index as version 0.2 if parent is 0 and child is 2. so 0.2 < 1. If grandchild is 99, then z-index is 0.2.99 < 1. I am not sure if it is true. By the way, multiple z-index:9999999 in the vd is hilarious.