CSS Position Property and Static Positioned Explained

April 30th, 2019

Nilesh Chaurasia

CSS Position Property

CSS Positioning property is used to set the position of the HTML Elements. By the use of the top, bottom, left and right properties you can set the location of the HTML Elements.

Properties	Description
static	Static position property means that an HTML cannot be moved and it remains as it is.
relative	Relative position property means that an HTML Element may change its position with reference to its default position of the HTML Element.
fixed	Fixed position property means that an HTML Element will be fixed on a position.
absolute
sticky	The Sticky position property behave differently on the basis of scroll position of the web page.

CSS Position Static Property Explained

Static Positioning property means that an HTML cannot be moved and it remains as it is.

By default the position of the HTML Element is static. The HTML Elements always positioned in the normal flow of HTML Elements.

The top, bottom, left and right properties may not be applied to the static positioned HTML element.

Example 1 – Static Position property example and application

<!DOCTYPE html>
<html>
  <head>
    <style>
		.static 
		{
			position: static;
			left: 30px;
		}
	</style>
  </head>
  <body>
	<img src="rose.jpg">
	<div class ="static">
		<p>A rose is a woody perennial flowering plant of the genus Rosa, in the family Rosaceae, or the flower it bears. There are over three hundred species and thousands of cultivars.</p>
	</div>
  </body>
</html>

In the above code, we apply Position Static property to the HTML Elements(<div>).

CSS Static Position Property Example Explained — Fig.1 – Static Position Property Example with Code.

Relative Position Property with Static

Relative position property means that an HTML Element may change its position with reference to its default position of the HTML Element.

With the help of relative position property you can shift your element to top, bottom, left and right properties.

Example 2 – Relative Position Property use with Static

<!DOCTYPE html>
<html>
  <head>
    <style>
		.relative 
		{
			position: relative;
			left: 30px;
		}
	</style>
  </head>
  <body>
	<img src="rose.jpg">
	<div class="relative">
		<p>A rose is a woody perennial flowering plant of the genus Rosa, in the family Rosaceae, or the flower it bears. There are over three hundred species and thousands of cultivars.</p>
	</div>
  </body>
</html>

In the above code, we have used Position Relative property to the HTML Elements(<div>). Where we apply left property(30px) to the HTML Element.