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:

DOM-based -
```
static, relative, absolute
```
Viewport based -
```
 fixed
```
Conditional -
```
sticky
```

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

sticky

property as it was newly introduced and would be hard to understand to new coders.

Let’s start from default one

static

considered default value to all box insight of our documents. In this case, we could not change its position directly defining position. It will be positioned according to document flow.

Relative

- positioning of element insight DOM comparative to another element of the page. It will stay on DOM with document flow but could be regulated by giving specific distance to sides (

Top, Left, Bottom, Right

). By the way, it will keep its initial positioning in DOM.

Absolute

- positioning element to closed relative positioned parents in DOM. If any relative positioned parents’ element didn’t find it will be positioned in the body section of DOM. The absolute positioned element will not affect other elements of the DOM and will be regulated by giving appropriate value to sides.

Fixed

– positioning element base of the viewport. As the name suggests it will be fixed in desktop without reflecting scrolling over the DOM elements.

Sticky

- positioning element in DOM as static but when certain conditions met it will changes status to fixed - viewport based positioning. By condition, it implies the expected position of the element in the viewport. This positioning directly depends on the parent box in which it exists.

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.