positionCSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.
A positioned element is an element whose computed position property is
An relatively positioned element is an element whose computed position property is relative.
An absolutely positioned element is an element whose computed position property is absolute or fixed.
A stickily positioned element is an element whose computed position property is sticky.
leftproperties specify the position of positioned elements.
This post talks about
fixed, which are three most frequently used
position: relative is set to an element, and its
top is set to be
20px, this element’s position is lower than its original position at
position: relative is not set. Similarly for
A typical mistake here is to think the element will be relative to its parent or the screen.
We usually use
position: absolute to set the element’s position according to the screen. But it can do more.
When we want some element to be at a fixed position when user scrolls down,
position: fixed is used.
Relative to Parent
Sometimes we need to set an element’s position to be a certain value relative to its parent element. How can this be achieved?
First, set the
position of its parent to be
absolute (if you don’t want to change the position of its parent,
relative will be OK).
Next, set the
position of the element to be
absolute and set its
right, etc. values.
Now, the element is relative to its parent.
If its parent’s
position is not set explicitly, then it’s
static by default. And an element of
position: absolute with a parent of
position: static will have a position relative to the parent’s parent. If its parent’s parent’s
static, then it will be relative to its parent’s parent’s parent, etc. In the end, it will be relative to the screen.
You may already know that setting
position: fixed can make an element stay the same position when user scrolls down.
If, however, you want to make an element fixed to its parent, you may refer to this answer at StackOverflow. A quick conclusion here is there’s no elegant solution currently.
Try with different combinations of
position and raise questions if you may.