CSS Position

Position and Float properties are very important to create a flexible layout.

CSS Position property defines the position of an element. The different kinds of positions are absolute, relative, static and fixed.

The "Web Design Ebook, Buy Now Button" in the right of this page is the best real time example of css positioning. I used CSS position property with value "fixed" to pin it to the browser window. Scroll down to see how it works.

The position values are explained below using table.

Value Description
Absolute removes the element from normal flow of the page and pins it in the specified position of the page.
Relative this property can be used to specify top, bottom, right and left of an element.
Static it does nothing, the element will follow the normal flow of the page.
Fixed it is similar to absolute, but instead of web page, it pins the element to the browser window.

Example

CSS Position Example


<div style="position:fixed; width:50%">
		<img src="img/final.jpg"/>
</div>
		

Preview

Next Lesson > CSS Display