CSS – Positions in UI Development | Brain Mentors Skip to content

CSS – Positions in UI Development

CSS-Positions are used to sets that how an element of an HTML is positioned in a document. Basically, Position is a property of CSS that helps you to position your HTML elements.

The CSS position property is changeable and robust/strong. Because it allows you to alter or set an HTML element’s position that whatever position you like.

There are five different types of CSS-Positions are as follows:

  1. Static
  2. Fixed
  3. Absolute
  4. Relative
  5. Sticky

And also there are 4 different properties used along with all CSS-Positions are as follows:

  1. Top
  2. Left
  3. Bottom
  4. Right
D:\Training\Self\Notes\Blogs\CSS-Positons\image-3.jpg

These 4 above mentioned properties only use when we first apply position property to any HTML elements.

Position: Static

The static position is a default position for every tags/elements of an HTML. If not specified any position property to any tag/element then by default the position is static.

Example: Simple web page is an example of position static.

Position: Fixed

Position fixed property is used when we want that an element stays at the same place even if the web page is scrolled. Then by using properties Top, Right, Bottom and Left we able to position the element of an HTML wherever on the screen.

Example: Fix the header position by using position fixed property.

Step 1: First create your web page.

Step 2: Apply Position: Fixed property to header ID.

Step 3: Then apply width=100% and top=0px to adjust the header.

Step 4: Now adjust truncated (content truncated with header) content of the web page.

Position: Absolute

The position absolute property is used to positioning the element at any specific position on the screen. When we apply position absolute to any element then it will come out of the document, not a part screen.

Basically, it is relative to the nearest parent element. So, by using top, right, bottom and left coordinates we easily positioned the element anywhere on the screen. 

Example: Put text anywhere on the screen.

Step 1: First create simple web page.

Step 2: Apply position absolute to h2 tag of section_1.

Step 3: Now by using Top and left we align this h2 tag anywhere on the screen.

Position: Relative

Position relative property is used when we want that any element is positioned to their normal position. And by using top, right, bottom and left we align any element into their relative position.

Mostly position absolute and relative used together because the position absolute is relative to its nearest parent. And always relative to immediate parent tag/element.

Example: Put <div> element anywhere on the screen with text inside.

Step 1: First create simple web page.

Step 2: Apply position relative to <div> element or section_1.

Example-2: Why use position absolute and position relative together?

Step 1: First create simple web page.

Step 2: Now, first apply position absolute to grandchild’s <img> element. Then locate this image anywhere on the screen. 

Step 3: If we want to put this image at right-bottom corner of this <div> (grandchild) element. So, it is only possible when we apply position relative to its parent i.e. grandchild <div> element.

Step 4: If you can apply position relative to child <div> element then the <img> tag is relative to child.

Step 5: If you can apply position relative to parent <div> element then the <img> tag is relative to parent.

Position: Sticky

Position sticky property is similar to position fixed property but with one difference. If any tag/element is position sticky, then that tag fixed on the screen and sticky as per the coordinates (Top, Left, Right, and Bottom) those we applied with that tag/element of an HTML. 

Example: Use of position sticky property.

Step 1: First create a simple webpage.

Step 2: Apply position sticky property to <div> element that is header of the page and with top and left values then only you will be able to see the sticky effect. This effect only works when only we scrolled down the web page.

Sign Up and Start Learning