CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS position property - Set relative, absolute, fixed value


CSS position property set an element positioning to display in web page.

CSS position property possible value relative, absolute and fixed.


CSS position:relative property

CSS position:relative property set element relatively followed by the relative offset from top, right, bottom or left.

Relative position is related to each and every around element properties (like margin, background-color and so forth).

Example Code:

<body>
	<div style="position:relative;left:120px;background-color:orange;width:120px;">This division part has 
	relative positioning for each elements.</div>
</body>

Run it...   »

Example Result:

This division part has relative positioning for each elements.

CSS position:absolute property

CSS position:absolute property set element absolutely followed by the absolute offset from top, right, bottom or left.

Relative positioning element inside you can set absolute position element.

Example Code:

<body>
	<div style="position:relative;width:400px;height:150px;border:1px solid orange;">
	    <div style="position:absolute;top:35px;left:220px;width:160px;background-color:orange;">This division part has relative positioning for each elements.</div>
	</div>
</body>

Run it...   »

Example Result:

This division part has Absolute positioning for each elements.

CSS position:fixed property

CSS position:fixed property set element in fixed, even if window scroll vertically or horizontally element is fixed place.

CSS postion fixed followed by the window offset top, right, bottom,left.

Example Code:

<body>
	<div style="width:400px;height:150px;border:1px solid orange;overflow: scroll;">
		<div style="position:fixed;top:35px;left:220px;width:100px;background-color:orange;">Fixed Element</div>

		CSS background-repeat property repeat image both side horizontally or vertically. CSS background-repeat property possible value is repeat, no-repeat, repeat-x (vertically repeat), and repeat-y (horizontally repeat).
CSS background-repeat property repeat image both side horizontally or vertically. CSS background-repeat property possible value is repeat, no-repeat, repeat-x (vertically repeat), and repeat-y (horizontally repeat).
CSS background-repeat property repeat image both side horizontally or vertically. CSS background-repeat property possible value is repeat, no-repeat, repeat-x (vertically repeat), and repeat-y (horizontally repeat). </div> </body>

Run it...   »