CSS position



The CSS position property is used to you manipulate the location of an elements.

The main CSS positions are :

CSS relative position

The position:relative; property is used to change the position of HTML element where it appears.

The values are relative position

Example

<html>
	<head>
	</head>
	<body>
	   <div style ="position:relative;left:80px;top:2px;background-color:red;">
		  This div has relative positioning.
	   </div>
	</body>
 </html>
 


Click on the "Run This Code" button to see how it works.


CSS absolute position

The CSS position: absolute is used to specify the cordinates relative to your layout top-left corner.

The values are absolute position

Example

<html>
	<head>
	</head>
	<body>
	   <div style ="position:absolute; right:80px; top:20px; background-color:red;">
		  This div has absolute positioning.
	   </div>
	</body>
 </html>
 


Click on the "Run This Code" button to see how it works.


CSS fixed position

The CSS position:fixed; is used to fix the position of an HTML element to a specific part on the webpage.

The values are fixed position

Example

<html>
	<head>
	</head>
	<body>
	   <div style ="position:fixed; left:90px; top:20px; background-color:red;">
		  This div has fixed positioning.
	   </div>
	</body>
 </html>
 


Click on the "Run This Code" button to see how it works.





CSS

Welcome CSS Syntax CSS Selectors CSS ADD css CSS Borders CSS Backgrounds CSS Colors CSS Padding CSS Margin CSS Fonts CSS Text CSS Outline CSS Box-Model CSS Height&Width CSS Icons CSS Links CSS Lists CSS Display CSS Tables CSS Position CSS Overflow CSS Align CSS Float CSS Inline-block CSS Opacity CSS Image-Gallery CSS Navigation Bar CSS Dropdowns CSS Cursors CSS Forms CSS Pseudo-classes CSS Pseudo-elements

CSS3 FEATURES

CSS Gradients CSS shadows CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Media Queries CSS Flexbox CSS important CSS Units