hey what's up guys today we're going to talk about z-index in CSS z-index is
very important to understand if you are learning CSS when I started out I did
not really know how z-index worked. All I knew was that if he increases z-index
somehow your element would show on the top and it won't be hidden so that
that's what I used to do and I always say that half knowledge is really
dangerous because if you don't understand something then you're gonna
have to do a lot of guesswork and try a lot of things randomly to figure things
out so you'll be wasting a lot of time go understand the z-index and how exactly
it work so you can predict where your element is going to be so that's what
we're gonna do today and welcome to Techsith tutorials. all right so to understand
z-index you have to understand a very important property in CSS call position
and let's take a practical example to understand it so let's say if
you have a classroom with a bunch of rows and you have a bunch of students
standing outside the classroom and teachers job is to make them sit inside
or have a some sort of order right so what teacher would do as the student
coming in they are going in the front of the class so the last student would sit
at the back and then the first children would sit in the front you you maintain
the natural order. CSS has also the same thing by default it has a position
called static which means don't interfere. the elements that are defined
first would be visible on the top and the elements that are defined at the
bottom would be visible at the bottom so let's do some coding and understand it
before we understand z-index alright so here I have four elements a b c and d
and a is first and D is last that's how they are define and I haven't provided any
CSS yet but if I execute them and then they would show up
in the order they are defined right so a is first and then D is last and I said
let's have some CSS so that we can we can visually see where where they are
for all of them width is let's say 50 pixels and height is also 50 pixels so
we can see them clearly and what I'm gonna do I'm gonna have each element
different background color so for 'a' I can say background color is that say red
B I have it green , yellow and let's make it blue
so now if I see them I would see four blocks now I can see exactly what's
going on now if I look at the position by inspecting the element I would see
position static okay so now let's say our student D here you know he's a rich
kid his father wants him to sit in the front so the teacher since you know he
got some donation teacher has to now make him sit in the front so how do you
do that one way to do it is change its position now again we don't want to move
ABC we just want to put D on in the front right so let's do that
so what I'm gonna do is I'm going to change the position of D to absolute and
I'm gonna put him on the top so I'll say top zero would I do that
D would sit in the front but now A is somehow underneath you cannot really put
D in the front without moving A but if you want to do that way then you have to
create some sort of another layer on the top of it where a is still in the front
but D is sitting on another layer or another floor should I say okay in the
front so now if I look at from the top I would see D first and underneath I would
see a if I could say depend depend on the size right so that's what's
happening here so using position:absolute I can place an
element out of order or wherever I like so this kind of elements are called
position element you can use position relative, position fixed, position sticky.
these are all called positioned elements now let's do one thing if I take all the
positions except maybe A make the other elements for the rest of the elements
except A they are position absolute except a all right so I don't really
need the position absolute here well I have to also say top zero this way it's
placed on the top so now a is position static BCD their position absolute and
they are all in a different floor except A it's sitting and still under that
static floor but what happens when you have three different elements, three
different positioned elements on the same floor on the same position what really
happens there so they are on the same floor but they're on the top of each
other so the last one in that case the last one that is position absolute it's
going to be visible right so here I have B C and D but D is going to be is
showing because it's a last one so on that floor there is an order that
matters okay now if I just move them a little bit so I can say five pixels here
it will be let's say 10 pixels and here would be that's a 15 pixels so I can see
the orders in that that they are so the green is first which is coming first
because b is first defined C is second and D is last
and so basically BCD on the same floor a is on a different floor so this is
called stacking order because you are stacked in the order that you are you
are received now again from BC and D I don't want D to be showing on the top I
want B to be showing on the top can you do something about it so that's where
the z-index come in the picture now from that order those positioned elements I can
change the B element to show the front by simply changing its Z index so right
now what is the z-index of all three and that is Auto so if I look at it so Z
index is auto for BC and D and think of Auto means almost like a zero so let's
change z-index of B so they all are kind of zero now we're gonna change z-index
of B to B 1 which is higher than B and C C's so now if I run it B element which
is green is showing another front now what what really happens think of this
way now it's putting it creating another floor called Z and X equal to 1 right Z
and X Auto is another floor now is the next one is another floor and it's
putting that be on there so it's kind of going out of order again but remember a
which is position static will always stay at the bottom because it's not a
positioned element now what are the possible values that I can have for Z
index you can only have it as an integer which means full numbers no floating
points you can have 0 or positive numbers or negative numbers so you can
have negative numbers also but it has to be full number so let's say if I do 1.5
here it will completely ignore the Z index so if I run this
again it will maintain the national order so BC and D would be in that order
because it doesn't understand what the floating point is in regard of z-index
now I also can get as high as possible you know and it would still work and
let's say if I have a z-index for the next one to be one more than B let's say
three here and if I run it then the yellow would show up because I have that
highest Scenic's now what if I want the the static element which is a to be show
on the top is there any way yes you can do that you have to remember the zeroth
flow so there is a static floor and then the auto floor which is like a z-index
zero and then z-index one two three like this so if I want to show this position
element two below the static floor I have to make them negative so let's say
if I do negative one all of them
then they're on the same floor which is one below the static and so if I run
this now the red shows up first which is static and all the position elements are
at the bottom so this is how the index really work and if you want to know more
about the position property I have a tutorial on it so you can understand our
different positions like position relative versus position position
absolute versus position fixed I'll provide a link here somewhere on the top
here so you can look at it and I hope you learned something from this tutorial
if you did please like don't forget to like I subscribed and provide a nice
comment and you can help the channel be a patreon I'll provide a link here and
you can also translate the video if you want to to your native language I'll
provide instructions in the description and thank you