CSS Position

Prev
Next
CSS Position

CSS Position

CSS position sets the position of an element. A new element can be placed at –

  • Top of an HTML page
  • Top of another element
  • The right side of an HTML page
  • The right side of another element of the HTML page
  • Bottom of the HTML page
  • A bottom side of another element in the HTML page
  • Left side in HTML page
  • The left side of another element in an HTML page.
CSS position cheat sheet

So basically, what is CSS positioning?

Position in CSS is a confusing property where most of the designers do mistake.

Do not worry! We are going to provide real life examples of css position property.

It is basically used to set the position of an element. This position property always defines what type of position method will be used as an element. It is used to define how an element is positioned.

There are 5 important types of position value:

  • static
  • relative
  • absolute
  • fixed
  • sticky

Other types of position which are less important and rare are:

  • initial
  • inherit
  • none

CSS Static Position

A static position is the default position. It means, for every page element static position is the default one.

If you create an element, say “element1”, then it follows a position “position1” by default.
If you define another element, say “element2” and do not set its position, then it will always follow a static position by default.

This means element “element2” will just follow the position of “element1” as a default behavior of the browser.

If you define the position of element “element2” as static, then it has the same behavior as default so the default position of an element is always “static”.

The syntax of Static Position:
position: static;

Example of a static position

.default {
  border-width:5px;
  border-style:ridged;
  background-color: lightblue;
  border:solid;
}

.css_position_static {
  border: 2px dashed blue;
  padding:10px 10px 0 10px;
  position: static;
}
Run the Code

CSS position fixed

CSS ‘Fixed position’ technique allows you to fix the position of the elements at a fix position in an HTML Page.

If you try to scroll the web page using your mouse, the position of the element which is defined as ‘Fixed’ will not move and is always fixed at the same position.

Syntax of Fixed Position:
position: fixed;

Note/Info:

Scroll the web page and you will notice that the div which is defined as ‘fixed position’ will be at the fixed position always. In this page,  you can see a fixed div at the top right corner in pink background.

Example of Fixed position

 .css_position_fixed {
	border: 2px dashed blue;
	background-color:pink;
	position: fixed;
	top:90px;
	text-align:center;
	right:25px;
	bottom:600px;
	left:1200px;
}
Run the Code

CSS position relative

CSS “Relative position” sets an element relative to its normal default position.

This sets an element in such a way that it goes away from an element in left, right, top or bottom sides relative to the default normal position.

Syntax of Relative Position:

position: relative;
top:30px; /*This moves element 30px away from top relative to the default position */

position: relative;
right:1em; /*And this moves element 1em away from right relative to the default position */

position: relative;
bottom:10%; /*Here it moves element 10% away from bottom relative to the default position */

position: relative;
left:-20px; /*moves element -20px away from left relative to the default position */

Note/Info:

The position of other elements does not depend on the element with a position as “relative”.

css relative position example

Example of the relative position

.default {
  background-color: lightblue;
  border:solid;
}

.css_position_relative_top {
  border: 2px dashed blue;
  position:relative;
  top: 20px;
  padding:10px;
  background-color:tomato;

}

.css_position_relative_right {
  border: 2px dotted green;
  position:relative;
  right: 25px;
  padding:5px;  
  background-color:lightgreen;

}

.css_position_relative_bottom {
  border: 2px double black;
  position:relative;
  bottom: 1.5em;  
  padding:5px;  
  background-color:yellow;

}

.css_position_relative_left {
  border: 2px ridge brown;
  position:relative;
  left: -18px;
  padding:10px;  
  background-color:orange;
}

.css_position_relative_mix {
  border: 2px ridge brown;
  position:relative;
  top:12px;
  left: 15px;
  padding:5px;  
  background-color:aqua;
}
Run the Code

CSS position absolute

CSS Absolute position is like an unrestricted position which is not a fixed position.

In this case, if you scroll the HTML page, you will notice that the element which is defined as “Absolute position” will not scroll as per the page.

Absolute position sets the element relative to its forefather element. 

In simple terms, the “absolute position” element is relative to its parent element so it is a css position relative to parent.

By default, it will position at the top-left corner of its ancestor(forefather) element.

The syntax of absolute Position:
position: absolute;

Note/Info:

  1. If an element, say “element1” is present before another element (say, “element2”) and “element2” is defined with “absolute position”, then the position of “element2” will be relative to “element1”.
  2. If you have no previous element before the element which is defined as “absolute position”, then it is similar to “static position” in this case. Here the top, bottom, right and left property are used to determine the exact location.
  3. In absolute position element, the position of the element is relative to its parent( or ancestors) while in relative position elements, the position is relative to the normal default position.
  4. All other elements are dependent on the elements which have a position of absolute so you must define absolute position elements carefully.
  5. The ancestor of the absolute position element must not have a position as “fixed”. This means that the ancestors must have either static, relative, absolute or sticky to behave properly.

Example of absolute position(Type 1)

.box1 {
  position: static;
  background: powderblue;
  background: orange;
  width: 700px;
  height: 20px  
} 

.main-box {
  position: relative;
  top:10px;
  background: powderblue;
  background: green;
  width: 600px;
  height: 100px  
}  

.absolute_position {
  position: absolute;
  background: yellow;
  width: 500px;
  height: 50px;
}
Run the Code

Example of absolute position(Type 2)

.box2 {
  position: static;
  background: powderblue;
  background: orange;
  width: 700px;
  height: 20px  
} 

.main-box1 {
  position: relative;
  background: powderblue;
  background: green;
  width: 600px;
  height: 200px  
}  

.absolute_position1 {
  position: absolute;
  top:50px; /*This will move 50px away from top from the parent element. */
  background: yellow;
  width: 500px;
  height: 100px;
}

.static_position1 {
  position: static;
  background: aqua;
  width: 500px;
  height: 50px;
}
Run the Code

CSS Position sticky

CSS “Sticky” is becoming the most popular position in modern times due to its cool feature. This enables an element to scroll down(if the page can be scrolled) up to a fixed point like position:relative and then it gets fixed at a certain position after you have scrolled till a fixed area and starts behaving like position:fixed.

It can easily switch its property from scrolling(i.e. relative) to a fixed position.

CSS “Sticky” is a mixture of “Relative” and fixed position but you have to keep in mind about the offset position compared to the nearest element(ancestor) in the scrolling area.

The syntax of absolute sticky:
position: sticky;

Note/Info:
Use ‘Sticky’ position carefully, else this can lead to some multiple issues in your HTML page which might change the look and feel of your website.

Scroll down and see from which point, this sticks to particular position. From that position it will stick to 10px from top


Attention: scroll please!




Attention: scroll please!




Attention: scroll please!




Attention: scroll please!




Attention: scroll please!





Example of a sticky position

.position_default_5 {
background-color: powderblue;
border:solid;
}

.position_sticky {
border: 2px dashed blue;
position: sticky;
background-color:tomato;
width:auto;
height:50px;
top:90px;
margin:2px;
padding:4px;
}
Run the Code

CSS Interview Questions and Answers

CSS position property is used to set the position of an element.
This position property always defines what type of position method will be used as an element. It is used to define how an element is positioned.

There are some important types of position value:

  • static
  • relative
  • absolute
  • fixed
  • sticky
  • initial
  • inherit
  • none

Default value of position property is static.

Yes, we can position Text in an image using CSS position.

Yes, the easiest option is –
 position :none; 

This means that CSS position left, CSS position right, CSS position bottom and CSS position top are ZEROS.

Yes, we can do vertical stacking of elements, one above the other using z-Index.

The z-index stacks the vertical ordering of elements in such a way that they appear closer to the user.

Prev
Next
Youtube Facebook-f Twitter

Tutorials for all brains!