Positioning

Introduction

Positioning allows you to take elements out of the normal flow of the document and give them different behaviours, such as placing them on top of every different always staying in the same place within the browser's viewport. This article describes the different position values ​​and how to use them.

What is the use of Positioning

Positioning allows you to get interesting results by overriding the normal flow of your document. What if you want to slightly change the position of some boxes from their default flow position to create a slightly whimsical and harrowing atmosphere? Positioning is your tool. Or what if you want to create UI elements that float above the rest of the page and stay in the same place in the browser window no matter how far the page is scrolled? Is positioning? Different types of alignment can be applied to HTML elements. Use the position property to activate a particular type of positioning for an element.

Static Positioning

Static positioning is the default setting given to each element. It simply means "Move the element to its normal position in the document flow. Nothing special here."

Relative Positioning

Relative positioning is the first position type delineated. This is very similar to static positioning, except that once the positioned element is placed in the normal flow, it can manipulate its final position, such as overlapping other elements on the page.

Absolute Positioning

Absolute Positioning is positioned relative to the nearest ancestor (rather than relative to the viewport like Fixed).

But; if a positioned element has no positioning ancestors, it will use the document body and move as the page scrolls.