The position property can help you manipulate the location of an element.
You can use the following values
static is the default value. An element with position: static; is not positioned in any special way. A static element is said to be not positioned and an element with its position set to anything else is said to be positioned.
Every element has a static position by default, so the element will stick to the normal page flow. So if there is a left/right/top/bottom/z-index set then there will be no effect on that element.
relative behaves the same as static unless you add some extra properties. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
<div class="box" style="background: #ccc;"> <div style="background: yellow; width: 50px; height: 50px;"></div> <div style="background: pink; width: 50px; height: 50px;"></div> <div style="background: black; width: 50px; height: 50px;"></div> <div style="position: relative; top: 15px; left: 100px; background: red; width: 50px; height: 50px;"></div> <div style="background: blue; width: 50px; height: 50px;"></div> <div style="background: green; width: 50px; height: 50px;"></div> </div>
In the above example, the red box was supposed to stay on the same column as the others. But as the position relative is applied and left:100px;, it causes the red block to move away 100px to the right from it's original position. So the value "relative" means position relative to it's original position where it was supposed to be.
You can use following property along with the property "position" to specify the relative position -
top specifies how much it will move away from the top of it's original position.bottom specifies how much it will move away from the bottom of it's original position.left specifies how much it will move away from the left of it's original position.right specifies how much it will move away from the right of it's original position.
Remember that, if you move the element away from it's original position using the value "relative", the element's original position is left black. And no other element moves to fill the gap created by position:relative; property. Though this is not true when you are using display:flex; to it's parent element.
absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. Remember, a "positioned" element is one whose position is anything except static.
Consider the following example -
<div class="box"> <div style="width: 100px; height: 100px; background: red;"> <div style="position: absolute; left: 10px; top: 10px; display: flex; justify-content: center; align-items: center; padding: 5px; background: #333; color: #fff;">Learn About Position</div> </div> </div>
In the above example, the absolute positioned element is placed at the top of the document. You will see "Learn About Position" if you scroll up the document. This is because this element has no positioned ancestor and that's why this element is taking the main viewport as it's ancestor and positioning the element relative to the main viewport.
Now consider the following. The following example is same as above but the parent(ancestor) element has position:relative;
<div class="box"> <div style="width: 100px; height: 100px; background: red; position: relative;"> <div style="position: absolute; left: 20px; top: 50px; display: flex; justify-content: center; align-items: center; padding: 5px; background: #333; color: #fff;">Learn About Position</div> </div> </div>
Now, the absolute positioned element has nearest positioned ancestor, so the browser is positioning the abosolute element relative to it's nearest positioned ancestor. So it moves 20px left and 50px from the top in it's parent container
The fixed value is similar to absolute as it can help you position an element anywhere relative to the document, however this value is unaffected by scrolling. See the child element in the demo below and how, once you scroll, it continues to stick to the bottom of the page.
<div class="box"> <div style="width: 500px; height: 100px; background: red; position: relative;"> <div style="position: fixed; left: 0; bottom: 0; display: flex; justify-content: center; align-items: center; padding: 5px; background: #333; color: #fff; width: 100%; ">Learn About Position</div> </div> </div>
So, absolute positioned element moves along with the document while scrolling. But fixed positioned element doesn't move along with the document while scrolling. Another important difference is that, if you notice in the above example, the parent element is positioned by position:relative;, but still the fixed element is being positioning relative to the main viewport (document). So fixed element are always relative to the main viewport (document).
Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
Note that the nearest ancestor doesn't need to be positioned. you can directly use position:sticky; without caring what it's nearest ancestor's position value. It is kind of fixed element but relative to it's parent container.
<div class="box"> <div style="height: 200px; overflow-y: scroll;"> <div style="width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: red;">Block 1</div> <div style="width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: red;">Block 2</div> <div style="width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: red;">Block 3</div> <div style="width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: red;">Block 1</div> <div style="width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: red;">Block 2</div> <div style="width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: red;">Block 3</div> <div style="width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: yellow; position: sticky; top: 0;">Block 4</div> <div style="width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: red;">Block 5</div> <div style="width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: red;">Block 6</div> <div style="width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: red;">Block 7</div> <div style="width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: red;">Block 8</div> <div style="width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: green; position: sticky; top: 50px;">Block 9</div> <div style="width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: red;">Block 10</div> <div style="width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: red;">Block 5</div> <div style="width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: red;">Block 6</div> <div style="width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: red;">Block 7</div> <div style="width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: red;">Block 8</div> <div style="width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: red;">Block 9</div> <div style="width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background: red;">Block 10</div> </div> </div>