‫Hey, there.
‫Welcome back, Siobhan, the site now in this lecture, let us discuss about positions.
‫So whenever we work with any type of elements, maybe our development, maybe a need, they both b h
‫or any type of element.
‫We usually need some position.
‫By default, we follow the natural flow that if I add a forced element, it will be here.
‫And then the second one, then the third one, and in the previous sessions were discussed about display.
‫That means by default, they are taking block space.
‫And then the second element and then the third element.
‫So I hope we got the idea about display properly now in positions.
‫We want to define how to add certain element at the top right corner.
‫Or maybe I want to fix something at the footer side.
‫Or maybe I want something at the center.
‫So how we can do that, that's where this whole position topic come into picture.
‫Now, before discussing about this topic in depth, I want to talk about fuel domes.
‫The first one is viewport borders, viewport.
‫So whatever the visual screen that currently we have is viewport.
‫That means this wide screen.
‫If I say what is your word that is VW, it will be this week from this point to this point.
‫What will be the viewport height?
‫It will be this height.
‫So this is our view on four different devices.
‫There will be different view.
‫Or if I open my website on a smartphone, the width and height will be different on tablet.
‫It will be different even if I try to use, inspect and try to change the size.
‫Here you can see on the top right corner, I can see my vertis changing.
‫So that means my view or width is changing.
‫And this is an important point which we will use in future.
‫Now let's talk about the two important thing.
‫The first one is whenever we are working with and you do this device dependent on the patent position.
‫Now, if I said this device will be dependent on its parent position, this will depend on its parent
‫position.
‫This will depend on its parent position.
‫So by default, this dip depends on the parent position.
‫So I have to find this to get back ahead.
‫But nothing is visual.
‫So if I get back here, I see this is debating them.
‫And then these are child childish, but they are not visible.
‫Why?
‫Because we don't have any content.
‫And had I have added a background colour to each one of them, even the child, even with bedding.
‫But they are not visible.
‫Remember, there were 200 person by default because they are block element, but their high does zero,
‫so that means we cannot do anything with them.
‫For example, let me add a height, let me add height as 100 percent.
‫So if I get my kid.
‫I still don't see any do.
‫Why?
‫Because this high depends on percentage, which depends on beating and the height for what is zero at
‫this point of time because we don't have any content.
‫I if I for just example, if I add Hi Ted.
‫And maybe if I add height as hundred pixels, save this one, you will see.
‫Now this is 100 percent or this big.
‫And if we remove this.
‫So I can use high desert him, for these example.
‫Now I get back here, you can see now we have 500, which is pretty big, actually.
‫Now, if I get back here, you can see now my height is 200m.
‫Let me set height in purpose.
‫So let me say five for them, for all of them.
‫Also, let me try to have the dual screen, you know.
‫OK, so all three giants currently have some height I get back here now the problem with them is they
‫have built as 100 percent.
‫So let me also add a weight to them.
‫This looks fine.
‫So this is off screen, and on top of this, we have three elements.
‫Remember, this is our bill in the back.
‫On the top of this, we have these three elements.
‫Remember, all these dates are inside my opinion.
‫OK, this is some basic thing.
‫But what if I want to add this here?
‫Maybe what if I want to add this at the bottom?
‫So now we are dependent on two things.
‫Either I can add this according to Parikh, which is the default one, or I can add this Deb according
‫to this viewport.
‫For example, if I jump on to see streaks here, you can see I have so many elements now they are not
‫dependent on this page.
‫They are going to be at the top right corner as well as at the bottom right corner.
‫So that's how they are working.
‫If I jump on to maybe see streaks, if you see if you scroll down, this is bikini top.
‫It doesn't matter if one parent is what child is, they are dependent on viewport.
‫That means this screen.
‫So this is the one.
‫The second is we are dependent on this, David said.
‫So all the content inside this Deb will be inside itself.
‫So these are the two things.
‫Now let's understand what is this position and how we are going to walk with my default position is
‫static.
‫That means we have some position by default and it is selected both static.
‫That means we are following the natural flow first, second, third.
‫Everything is fine.
‫Let me also add some margin here, so we can define some different.
‫You know, so in static, we are following the parent route.
‫That's not true, and everything is fine.
‫So this is our first child, the second the start all out of falling static, but we have the second
‫setting as position as really do.
‫So if I position us relative.
‫Nothing happens.
‫Everything is the same.
‫But now we have access to five values that can help us to customize this whole thing.
‫So these five values are provided plus z index travel means top right, bottom left as well as the Z
‫index.
‫Now what I mean by this related that means this item is here, but I can give a reference and move it
‫anywhere, according to my current position.
‫For example, if I don't.
‫One room.
‫Angela's left one room, save this one.
‫Get back here.
‫So from the previous position, it moved one room as well as one room.
‫So now it has moved from the previous position, previous position was from here.
‫It moved one name from top and left.
‫And this is something important to remember this is moving from previous position.
‫It is following the natural flow like the earlier one.
‫But now we have access to these values and we can customize.
‫The other important thing is, if we are using static, have we don't have access to these values rd,
‫stop and live.
‫So if I get back here, nothing happens.
‫But this is related.
‫I have access to these values.
‫So these values depend on the previous position of this element itself.
‫Remember this point?
‫By default, all these positions are static.
‫That means they are following the natural flow.
‫So if I use positions that they can.
‫And if I stop.
‫One of them, nothing will happen because this is the default value we they don't write it.
‫Nothing matters.
‫And if I jump here, nothing happens because this doesn't work with static values.
‫Remember this scene, this one?
‫So that's the first one static value by default.
‫We are having this setting with every element.
‫Now, the second one is related.
‫It's important.
‫And if you're going to understand this, it will help you a lot.
‫So let me I position the leader.
‫Save this one.
‫Get back here.
‫Nothing happens.
‫Why?
‫Because we need to pass.
‫Devalue top, bottom, whatever the position we want.
‫Here we just convey that or get this element.
‫The second element is now relative, but we need to pass value by default.
‫It is going to stay there only in relative.
‫Now, if I say dog one room, that means from my current position.
‫Remember in the letter we follow the natural flow, but we can customize that this value.
‫So whatever my position will be, the default position, I'm going to move one room from the top.
‫Now get back here.
‫You can see this green is move one room from the original position.
‫Maybe also, I left wondering, see?
‫You can see the original position was this no more than one room here and one room here.
‫I hope you got the idea.
‫So that means in the letter we follow the natural flow, whatever the original value is, but we can
‫customize and move it.
‫This is the second one pretty important since we are following the natural flow.
‫Everything is as it is, but we can also customize thing.
‫Now, let us discuss about position as absolute, the most important one, as well as the most interesting
‫one.
‫I'm 100 percent sure you are going to get confused, so be ready to watch this lecture twice.
‫What I'm going to do is I'm going to add position as absolute.
‫Save this one.
‫Get back here.
‫OK.
‫Things are not normal now, so for now, let me just remove this for a bit.
‫Come in this one.
‫Get back in.
‫So this is the normal state in which we are all walking.
‫We have pink.
‫We are green.
‫And we have yellow.
‫Looks fine.
‫But as soon as I add position as absolute.
‫OK, I have one piece missing married is gone.
‫So before that, I'm also going with Jane, this is I'm going to make it to them.
‫Save this one and now get back.
‫Now here you can see this is our second piece, which is green.
‫So what actually happened is green, Greenpeace is floating and it is floating on its current position.
‫So the space that was created for the dark green is now filled by this yellow light green one.
‫So in reality, what happened is our browser is only adjusting to jail child one and the child told.
‫The J2, which was green in color, is now floating in air.
‫If I refresh this one, you can see this is floating in the air.
‫Now how we are going to position this, and this is where the fun part begins.
‫So as soon as we add absolute, we have this child, but it is floating on its position.
‫So whatever the next element will be, it will take its place.
‫That means this is child three.
‫It will just arrange after child one because this child is floating.
‫That's the first part that means this is floating and it is not making any physical space.
‫I hope you got the idea.
‫Now the second part comes is whenever we apply a new type of top or bottom, any type of value, we
‫are going to see some magic.
‫So if I say top hat and if I say zero pixels, save this one.
‫Now goes to our viewport that does Europe said, if I are left there and says, Europe, excel, save
‫this one.
‫It goes to the browsers zero pixel.
‫I should say viewport, zero pixel, how this is happening, why this is happening.
‫That is the important point.
‫Now this position depends on beating any parent or insisting, I should say any ancestor that has some
‫position value.
‫So suppose our parent doesn't have any type of position property that is why it's not falling parent,
‫so its parent has some position property.
‫That is why I Child two is following the browser.
‫That means this storm left depend on parent, which has positioned property.
‫I know you are going to get confused, but what I'm going to say is that the child do is depend on a
‫parent on our ancestor.
‫It can be this day.
‫It can be a body which currently have opposition opposition property.
‫At this point of time, this doesn't have opposition property, so it is dependent on the browser for
‫its value.
‫If I don't have any type of value and if I just say opposition absolute, it is going to float only
‫float on its current point.
‫But as soon as I start adding dot zero pixel as well as left zero pixel, it will depend on interest.
‫Remember, I'm seeing ancestor ancestor, the nearest ancestor, which currently have a position value.
‫So this is the child.
‫The ancestor is live to disturb.
‫Have any position value?
‫No.
‫Then it's close to body and keep on falling for at the end of the day.
‫It is depending on browser for now.
‫But as soon as we add up position here, maybe relative save this one.
‫This is going to depend on our feeding this feeding.
‫This is Dave class feeding because now this has some position value in my head.
‫We are not considering static.
‫Static is by default, we are not considering it.
‫This need a position value which is either relative, either absolute or maybe fake static that we are
‫going to start.
‫This need some value other than static.
‫So if it is relative and if I save this one, get back here.
‫You can see this is our current position, which is dobbed zero as well as level zero.
‫Now if I see interop left, if I see right zero, save this one.
‫Get back here.
‫You can see right zero.
‫That means right from disappearing.
‫This David self.
‫So now remember, these values are depending on the ancestor which has Oposicion property.
‫In this case, this giant two is dependent on this.
‫Do why?
‫Because we are at our position relative.
‫But if I remove this one, same here.
‫Get back.
‫Now it's dependent on those that I hope you got the idea.
‫This is the most fun one, why most of these students, most of the audience, most of the instructors
‫don't understand this, and I'm serious about this point.
‫Most people don't understand this absolute and elitist thing.
‫The simple thing is, these values for absolute depend on and sister and sister, which currently have
‫opposition value.
‫Now this can get serious when we have multiple devs.
‫So that is why I want to take some complex example.
‫That is why I'm taking the second day of their second child.
‫OK, I hope you got the idea.
‫Now let me get back to this fight.
‫Wait, and let me remove this one.
‫Save this one.
‫Get back when things are normal.
‫I hope you got the idea.
‫What I'm going to do is I'm going to play with child one.
‫So if I say position absolute, what is going to happen at this point of time, I haven't provided any
‫value.
‫The first change we are going to say is this is going to float.
‫So this pink is floating and behind the scenes.
‫Child two and child three have taken their position.
‫If I get my kid, change decides, let's say to them, save.
‫Get back here.
‫You can see this is floating and these two are their current natural flow.
‫Now, if I provide any type of position, maybe one pixel.
‫As well as, let's say, left one big sell.
‫This is going to effort towards and sister, that is going to be this Dave.
‫And currently we don't have any position value that is going to browser.
‫And here you can see one big here and one pixel here.
‫Great.
‫And let's say a five pixel.
‫Save this one, get back here, you can see this is five pixel five pixel.
‫But as soon as I make any type of ancestors relative or maybe sticky figs, absolute, it is going to
‫follow this position.
‫Absolute, these values are going to follow the ancestor, whichever the ancestor nearest ancestor that
‫is currently following Oposicion value.
‫Get back here now this five pixel is from.
‫I got it on there.
‫I hope you got the idea, OK?
‫Now, if I see.
‫Bottom five pixel in.
‫You can see bottom from this point.
‫And left from this point on, this is falling on beating.
‫Remember this point?
‫So this combination of relative and position plays out really well.
‫Now we have flexibility to arrange any item inside out of in the.
‫Now I have if I take this as in Jim, get back here, you can see this item depends on the parent live.
‫If I said this is 15m.
‫This item depends on the pairing, and this is pretty important.
‫I have flexibility to arrange a child inside my Bennink anywhere I want.
‫It can be left, right, doll bottom anywhere.
‫I hope you got the idea, so that's this relation between religion and position is magical.
‫And remember, this can be asked during the interview.
‫This is this is actually the point.
‫This is a difficult question and a big section of students never understand this point.
‫So I hope you got the idea.
‫Let me remove these.
‫And you can see we are back to normal.
‫And let's jump on to the next one, which is positioned as fixed.
‫So here suppose if I take a position as fixed and if I bother, I LuthorCorp one room, save this one.
‫Get back here.
‫You can see after this one room, it is fixed.
‫What does this mean and how this is going to follow?
‫The first thing is this fix doesn't follow any natural flow.
‫The second thing is it just follows the viewport.
‫So whatever the size will be, it will take one REM as the difference and it is going to stick there.
‫One good example is let me add some high def instead of 20, let me take 50 them, save this one.
‫Get back here now, even if you see I can scrawl things, but this element is fixed in.
‫If you remember them, that's how this is going to be followed, or maybe if you remember the Amazon
‫page, the header is fixed.
‫So that's what this is going to work, but it is still following the margin now I maybe I want it to
‫be on the left side.
‫So what I can do is I can see left and I can say zero room.
‫Save this one and get back here.
‫You can say it's now on left zero REM.
‫Maybe I want it at the bottom, so save bottom and head I can utilize on the right corner, right?
‫One on one as well as right one, save the Swan and get back here.
‫You see, it's here now doesn't matter what is the screen size, it doesn't matter what is your view
‫or you scroll down or not.
‫This is fixed here, just like our previous example.
‫This is fixed here.
‫So that's how this is going to work, and this will position folks well.
‫I hope you got the idea about fixed.
‫We are not forming natural flow.
‫Also, we don't care about scrawl.
‫We are flowing on the screen and depend on viewport directly.
‫So if whatever the value I'm giving, it is according to screen and not according to the patent.
‫That's great.
‫Now the next one is sticky.
‫It's pretty important and it is useful to create navigation bar and other things.
‫If I get back here on the regulatory school website, if you see this navigation bar is normal, but
‫as soon as I scroll and stick to the top, get back here.
‫It's normal.
‫Scroll, stick to the top how it is going to work.
‫So what we can do is we can add sticky here.
‫By default, it follows the natural flow.
‫So get back here, it's natural, everything is natural.
‫So it will remain on its natural position.
‫But whatever the value we give, once it gets that it will take.
‫Save this one.
‫Everything is natural, but as soon as I touch these zero percentage of top.
‫It's like now you can see it's pick.
‫As soon as I go back to natural position, it's there, but as soon as I touch the zero, top it stick.
‫So this is important in terms of navigation, actually.
‫So most of the time you will see sticky for the not navigation only.
‫I hope you got the idea.
‫So basically, this is following relative.
‫But as soon as it touched the top as zero tons and no fixed notice fixed.
‫But now back to.
‫So that's how the stick is followed.
‫So that's all these are the five values, let me do a quick revision, most of these children don't
‫understand us.
‫The first position has started simple, everything is following the natural way.
‫Whatever we have been doing to now, also these values doesn't work with this tactic.
‫The second one is related.
‫That means we are following the natural flow, but we can provide these values to move our elements.
‫I understood, OK, if I am at the second position, I will remain on the second position, but I can
‫provide top, bottom or whatever the value is to move here and there.
‫Great.
‫Then we have absolute that means I'm not going to follow the natural position, I will follow the interest.
‫That is my opinion.
‫And you can move according to top, bottom, left and right.
‫So this means that I'm flowing.
‫I want all the other element and I'm not following the natural flow and whatever the position you give,
‫I will follow, according to my opinion.
‫So suppose this is debate and I will follow to appear left here, right here.
‫You got it there.
‫Brings on debate and then we have fixed.
‫That means I don't care about better now.
‫I care about you.
‫So if you'll give bottom right, I will be here.
‫If you give bottom left, I will be had.
‫Doesn't matter where my parents, even if I'm on the second position after this block, I don't care
‫about bearing.
‫That's all.
‫So if I get back here.
‫Now, the last one was about sticky that those will be fixed here, but as soon as I left my position
‫required position.
‫I will go back to the normal that is my relative position.
‫I hope you got the idea.
‫We will discuss about this more during our short project and that will clear all your doubt.
‫Thank you for following.
‫Make sure you read this one.
‫Make sure you try all these values yourself simple and more creative with beating three goals.
‫Then try experiment all of these values.
‫OK.
‫This was a long session.
‫And I see you guys in the next one.