Hello Geeks!!..Hope y' all are doing Good..

In this blog, we are gonna learn all about CSS Position using code snippets. Soo, let's get started!!

CSS:Cascading Style Sheets (CSS) described how HTML elements are to be displayed on screen, paper, or in other media.

CSS Position property

The position property in CSS tells about the method of positioning for an element or an HTML entity. There are five different types of position property available in CSS. They are:

1.Fixed

2.Static

3.Relative

4.Absolute

5.Sticky

The positioning of an element can be done using the top, right, bottom, and left properties. These specify the distance of an HTML element from the edge of the viewport. To set the position by these four properties, we have to declare the positioning method. Let’s understand each of these position methods in detail:

1.Fixed:

Any HTML element with position: fixed property will be positioned relative to the viewport. An element with fixed positioning allows it to remain at the same position even we scroll the page. We can set the position of the element using the top, right, bottom, left.

Example: The below example illustrates the CSS positioning element by using the position: fixed property.

div. fixed {
position: fixed ;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}

2.Static:

HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties. An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

Example:

div. static{
position: static;
border: 3px solid #73AD21;
}

3.Relative

An element with position: relative; is positioned relativeto its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

Example:

div. relative{
position: relative;
left: 30px;
border: 3px solid #73AD21;

4.Absolute

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

Here is a simple example:

div. relative{
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div. absolute{
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}

5.Sticky

An element with position: sticky; is positioned based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position: fixed). Note: Internet Explorer does not support sticky positioning. Safari requires a - webkit - prefix (see example below). You must also specify at least one of top, right, bottom or left for sticky positioning to work.

In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.

div. sticky {
position: -webkit-sticky; (/safari/)
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}

All CSS Positioning properties:

bottom: Sets the bottom margin edge for a positioned box

clip: Clips an absolutely positioned element

left: Sets the left margin edge for a positioned box

position: Specifies the type of positioning for an element

right: Sets the right margin edge for a positioned box

top: Sets the top margin edge for a positioned box

Conclusion: That's all about Css position properties and their different types.