CSS position explained

CSS has two very important properties on determining the position of an element in webpage: display and position. display is used to determine how elements are grouped and displayed on the page. While position is used to determine the exact position of an element on a page. And this post would explain position property in detail.

position is used to determine the exact position of an element on a page. It has five possible values.

• static
• relative
• absolute
• fixed
• sticky

sticky is supported starting from 2017 in browsers and it would be explained more later.

static

static is the default value of the position of an element, if position property is not defined, browser would treat the position as static for an element. In this case, elements would appear on page as the order appearing in source code which is called normal flow. Each block level element will have its own block and there will be no overlapping among elements.

The position of the element is determined by browser itself, hence top, bottom, left and right will have no effect on this property.

relative, absolute, fixed

relative, absolute and fixed are in common where they all positioned based on some reference point. The difference is the reference point is not the same for the three properties. Hence it would be easy to understand these three properties if the reference point is understood properly.

relative

relative will shift the element based on its default position(when it's static), i.e, the reference point is the position when its position is static.

It must be used along with top, bottom, left or right to determine the amount of shift.

div {
  position: relative;
  top: 20px;
}

In above code, div element will move down 20px relative to top.

absolute

absolute will shift the element based on its parent element, i.e, its reference point is its parent element.

It has a pre-condition though, the reference point(normally parent element) cannot have position property value static, otherwise its reference point will become the html element. In addition, absolute must work together with top, bottom, left or right properties.

/*
  <div id="father">
    <div id="son"></div>
  </div>
*/

#father {
  positon: relative;
}
#son {
  position: absolute;
  top: 20px;
}

In above code, the parent element has a relative position, the child element has an absolute position, hence the child element will shift down 20px relative to its parent element. If the parent element has static position, the child element would shift down 20px relative to the top of the HTML page.

Note the element that has absolute position would be ignored by the page normal flow.

fixed

fixed tells the element to shift based on the browser viewport, i.e, its reference point is the browser viewport. This indicates that the position of the element doesn't change when page scrolls.

If it works with top, bottom, left or right property, it means the initial position of the element would shift based on viewport.

div {
  position: fixed;
  top: 0;
}

Above code tells the div to be at the top of the viewport all the time.

sticky

Different from other four properties, sticky is dynamic, i.e, it has different position strategy in different conditions. It's more like a combination of relative and fixed property. Sometimes it looks like a relative element while sometimes it may look like a fixed element.

This makes an element look like dynamic fixed. For example, the search bar on a webpage, it may be in its relative position when page is loaded.

When page scrolls down, the search bar would fix its position on the top of the page.

When page scrolls up to original position, the search bar would come back to its original relative position.

The pre-condition when sticky can take effect is it must work with top, bottom, left or right. It cannot be omitted, otherwise it would just work like a relative element without fixed effect. These four properties are the trigger for sticky to take effect.

How it works is that it would switch to fixed position when the parent element leaves viewport and its distance is less than the top, bottom, left or right value compared to the sticky element. When the parent element leaves the viewport completely, the element would switch back to relative position.

#toolbar {
  position: -webkit-sticky; /* safari */
  position: sticky; /* other browsers */
  top: 20px;
}

sticky can be used in cases like fix table header as well.

The code is pretty simple.

th {
  position: sticky;
  top: 0; 
}

The sticky property must be set on a th element as thead and tr don't have relative position which would cause no sticky effect in the end.

Reference: http://www.ruanyifeng.com/blog/2019/11/css-position.html