CSS Positioning

Here, we show you how to define the positioning of elements using CSS.

CSS positioning allows you to position an element on the page wherever you want. Relative positioning allows you to position an element relative to it's containing element. This means you could create a navigation box and have a header inside the box 20 pixels below the top of the box. No matter where you move the box on the page the header will always be 20 pixels below the top border of the box. Absolute positioning allows you to position an element relative to the browser borders and not related to other elements on the page.

Relative Positioning

This position will keep the element in the same position relative to it containing elements on the page when the browser is resized. You can specify the location relative to the left, right, top, and bottom of the containging element.

External CSS File

This is your external CSS file named "stylesheet.css".


	.position1 { position:relative; top: 40px; left: 80px; }

PHP Page


	<html> <head> <title>HTML tutorial</title> </head> <body> <br> <span class=position1>This is 80 pixels from the left and 40 from the top.</span><br><br> </body> </html>

This is how it looks


	This is 80 pixels from the left and 40 from the top.

Absolute Positioning

This position will keep the element in the same absolute position within the browser window. You can specify the location relative to the left, right, top, and bottom border of the browser. Try resizing the browser width and watch the element below stay where it is.

External CSS File

This is your external CSS file named "stylesheet.css".


	.position2 { position:absolute; top: 40px; left: 80px; }

PHP Page


	<html> <head> <title>HTML tutorial</title> </head> <body> <br> <span class=position2>This element has absolute positioning.</span><br><br> </body> </html>