Name: 忘れ去られたCSSの位置 (The Forgotten CSS Position)
Uploaded: 2021-01-14T10:24:36.000Z
Duration: 7 min 28 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

基礎受動態

My name's Kyle and this is webbed of simplified.

We make the wet easy to understand, an accessible for everyone.

And this video I'm going to be covering CSS sticky position what it is and where you should be using it by going over two examples in depth.

We're CSS sticky position makes sense to use.

The first example that you can see here is where you have a Web page with a header of the top.

You have some content inside of it, and you want your header to stick to the top of your page as you scroll down.

As you can see right now, the header does not stick to the page when we scroll down, and the normal thought to fix this is to use a fixed position.

So we would select that navigation, which we have a class four of May.

And then we would just set the position to fixed, which forces the element to stay in a sporting spot on the Web page, and we want it to be at the very top of the screen so we'll say top of zero.

So it'll stick to the very top of the screen.

You see, our header now sticks to the top of our page.

But you notice that our content got pushed up.

And that's because this header no longer takes up space on our page.

So we need to also select our content here.

We're gonna need to supply a margin on the top of oysters, say 30 pixels to push it back down to where it came from.

And this is how you would use fixed position in order to make this type of header.

And in this case, fixed position is perfect.

But let's say you had a large section above your head.

Er, for example, we added a class here we give it, had her large.

We say that, you know, I see that we have this picture at the top of our page and we want our navigation bar to come underneath of that page but still stick to the top of our page when we scroll down.

In order to do this, we're going to use sticky position.

So let's remove these positions that we have here.

Let's remove our margin top from our content.

And if we say that, we see that we now have the header at the bottom of our image, just like we want it.

But if we scroll down, get no longer sticks to the top of our browser, which is what we want in order to get around this, we use sticky position.

Now we'll put position sticky here, sticky.

There we go and position sticky acts just like relative position when it's inside the browser.

So if we school, you see it looks just like Rohit to position, and it works just like normal.

But the key here is if you supply a primer here, for example, top and we set it to zero.

As soon as the top of this zero pixels away from the top of the screen, it will stick to the top of the screen and act like a fixed position element.

And then, if it becomes farther away from the top of the screen than zero pixels, it'll go back to being relatively position.

So if we say that and we scroll here, you see it's relative and stays down there just like we want.

And as soon as the top of this element touches the top of our screen, it becomes fixed position to the top of our screen.

And if we go back up, you see, just like we wanted Thio.

And the best part is is, since it acts as a relative position element, we no longer need to apply margins to the stuff that comes after our navigation.

This is a great use for sticky positioning when you want to move an element that doesn't already start at the position you want to fix it at now, let's look at another example where Sticky position.

It could be used inside of content, but it's smaller than the size of the screen.

Open this up in life survey here, and we have a list right here of different elements that we have a B, C, D and all the way down.

And what we want is as we scroll through our list, we want this a header to stay at the top of the page until we get to the B header and until we get to the sea header and so on, all the way down to be so.

In order to do that What's going to our list?

Which is where we want to apply our positions too.

So we can use sticky position for this too.

I'm gonna give it a position, Hear of sticky?

And we also wanted to stick to the top of the spin.

So we use top zero and that's all we need to do.

If we scroll down, he'll see it sticks to the top of the page and stays there.

And then when he comes in, he becomes the top and see, and then d and so on.

And the reason that these elements stopped becoming sticky when they hit the next element is because a sticky element on Lee is fixed position while inside of its parent element.

So if we scroll down here, you see that we have our header right here, which is inside of a list group on the list group just goes to the bottom of the elements inside that list.

So acorn, in this example is the bottomless group.

And as soon as our list header gets to the very bottom of its parent, for this group in no longer becomes fixed position, which is exactly what we want.

Once it passes, the last element see becomes the new sticky business moment in that place and d and so on.

And this is exactly where sticky position shines.

This is the reason that sticky position was created in order to create these dynamic scrolling elements inside of your page that aren't just fixed at a certain spot on your page at all times.

One thing to note about sticky position is not all browsers currently support sticky petition.

Only about 90% of browsers support it, and that's only if you prefix it as well.

In order to prefix the element, you use these different prefixes.

We have most sticky M s Dickie and oh, sticky.

And these just stand for the different browsers that we have.

We have operas, we have Microsoft, we have Mozilla, and so on the web.

Kate will be for chrome, and you just want to put all of these above the normal definition for sticky.

And this will increase your browser support up that 98% because most browsers only supported with this prefix, and only about 50% or so support it without the pre sex currently also, to get around those 10% of browsers.

We'll go in here, they say at supports, and we could just say position sticky and you would want to put all of these different prefixes inside of this as well inside of an or and in here.

We just want to select that list header again, and we want to say position sticking top of zero and then inside of a normal listed here.

We want to use position relative, since that is what sticky essentially falls back to if it is not actually supported.

So if we do this now, in browsers that are not supported with sticky headers, we'll just get a relative header just like normal.

But in browsers like my browser chrome here, best support, sticky position.

It will now work exactly as we wanted to.

So I hope you guys learn something from this quick look into sticky position with CSS is really a quite unique way to position element and incredibly useful when doing things such as this list view or this header view down here that normally you would need to use JavaScript to achieve before.

So if you guys enjoyed the video, please make sure to leave a light below and let me know in the comments.

If you guys enjoy the shorter version of meter's going over feature in CSS.

And if you guys did like this, let me know down below what other features you want me to cover, whether it be CSS Java script, html.

It doesn't really matter, Just let me know down below.