CSS Position Property and Static Positioned Explained

Ad Banner Image

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.

Position static vs Position Relative Uses and Application
Fig.2 – Position static vs Position Relative Uses and Application
Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress