How Elements Positioned and Behave on the Web Page

It is interesting to everyone who started his journey in web development positioning element through in single display with tons of properties. It comes a time that all elements start behaving itself not in a way we want.

It is because we are a tester, without knowing the functionality of property we try to apply it. Here is some advice who wants to understand shortly the main functionality of position property in CSS.

Before starting to think "how all position propriety works?" , we need to understand Content Box (gray box in image) vs Viewport(black border separated) positioning elements on our web page. By Content box, it implies Document Object Module (DOM) entry file in which HTML and CSS code will be rendered as a single page(grey area in image).

But this single page mostly didn’t fit every desktop. It needs to scroll over DOM horizontally but sometimes vertically.

Even we scroll over the content on the page but viewport stays always the same.

For that reason, developers created the possibility of positioning according to Viewport. It helps to concentrate users on some part of the page. We will take a look positioning element base on those two criteria in this article and It would be more clear if we separate property of display in tree class:

1. DOM-based -

   static, relative, absolute

2. Viewport based -

    fixed

3. Conditional -

   sticky

In this article, we are going to talk more about the

sticky

Let’s start from default one

static 

Relative 

Top, Left, Bottom, Right

Absolute 

Fixed 

Sticky 

Sides variable is a breakpoint to changing conditions from static to fixed which will apply only in the scope of the parent element.

For example,

if (viewport position == top:0){
then property changes to fix
}

In an easy word if fish big enough to the aquarium it could not move at all and stay fixed all the time. If you want to get a desirable effect make aquarium bigger or get fish out of the aquarium. In this case, it will be fixed into its parent element and will stop being fixed and starts to flow like other elements if its parents start to move. Here are three mistakes by which sticky does not work:

• Parent container the same as the element which we declare position sticky
• If the parent element’s overflow value different then visible.
• The initial position of the element is not corresponding to the expected breakpoint of the element.