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