menu
position is the CSS property that we use to manipulate the position of an element in the webpage flow.
taught by Tina May
You can set the element to behave just like it normally is in the document flow (default value):
position:
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
We can set an element, so when it moves from its original position, it still retains its place on the normal HTML document flow, leaving a gap at that spot.
position:
Tip: unless we give it styling properties, nothing will change visibly on a relative element, so it's most often used as a parent for absolute-positioned elements. The top property doesn't take effect with static positioning. You can learn more about the top property here
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
If you have a parent container that has a relative position, we can set a child element inside it to be removed from the normal document flow, but still scrolls along with the page.
position:
Tip: We use relative-positioned parent container to give absolute-positioned elements something to latch onto (to position themselves relative to).
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
We can make an element scroll along until it hits a specific point in the screen. Once it hits that specific point, the element will remain there even when you scroll until the bottom of the parent container. We usually use this for sticky sidebars or navigation menus.
position:
You're only going to see if you try to scroll down. You could say sticky positioning is a mix of relative and fixed positioning. In case of sticky sidebar & navigation menus in a website that scrolls from top to bottom, we usually specify the position with the top property.
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
We can set the element to be removed from the normal HTML document flow and have a fixed location on the browser window. This means it stays in place even if the page is scrolled.
position:
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.
Copyright 2023