About me

I am a full stack .net developer with 5 years of experience in front-end and back-end technologies like HTML, CSS, Jquery, Angular, Typescript, Bootstrap, C#, MSSQL and Mongodb. I have done Btech Computer engineering from Sigma Institute of Engineering & Technology that comes under GTU (Gujarat Technological University). I have worked on web applications, Web APIs, Windows Forms, Web Forms, Tray applications and corporate websites. Programming is my hobby and I have starting writing blog to provide a platform for those who want to grow their careers as a fullstack .NET developers.

We are making websites & web apps for you!

Lesson 2 - Part 9: 10 Important CSS properties: Position

As the name suggests, the CSS property position is used to align the HTML elements. 

CSS properties like top, right, left, bottom properties aligns the HTML element as per the values set to these properties. The position property specifies with respect to what these top, right, left and bottom values are to be set for an element. 

The position property can be: relative, absolute, fixed or static. By default all HTML elements are static. Now let us see how these values work.

1. Position: relative

Position relative sets position of an element with respect to its normal position that it is supposed to be. Here is a jsfiddle example that shows how the division is positioned according to the top and left values when its position is relative.

2. Position: static

By default all the HTML elements have static position. For such elements, the properties like top, left, right, bottom does not make any difference in their positioning. Try changing the position from relative to static in the above example, the output will be:

3. Position: absolute

The position absolute sets the element relative to their parent element with positioning relative or absolute.  Here is the jsfiddle example: jsfiddle example: position absolute.

Now, try changing the position relative property from the outerRelativeWrapper and see where the absolute division aligns. 

Position: fixed

Position fixed aligns the element with respect to the viewport. The element remains at the same place even after scrolling. Here is example for position fixed: jsfiddle example

I have used dummy text from www.lipsum.com to get some page scrolling. 

Can you do this?

Can you create these overlapping divisions as shown below? The color code for opaque div is #FBE5D6 and that for the overlapping transparent div is rgba(214,220,229,0.5).
You can send me your jsfiddle links and queries at [email protected].

Subscribe to Be a full stack .NET developer by Email