CSS Position Properties

Why we need to use position css..??

When ever we design webpage or application we will add many html element by default all elements are taking position by default its left to right thts way web page display weired so it doesnt attract to eyes so we need to arrang element in format so we need to use css position property.

Following different types for css positions
(1)Static
(2)Relative
(3)Fixed
(4)Absolute

(1)position: static

.static { position: static; }

An element with static position is always positioned according to the normal flow of the page: in this demo position assigned left to right submit button beside to textbox.

Text :

(2)position: relative;

.relative { position: relative; top: 10px; left: 30px; }

An element with relative position is always positioned according to the element which based we can set other element top , left , right , bottom

Text :

(3)position: fixed

.fixed { position: fixed; top:900px; bottom: 19px; width: 300px; left:0; }

An element with relative position is always positioned according to the element which based fix.

Text :

(4)position: absolute

.absolute { position: absolute; top: 200px; left:50px; width: 80%; height: 100px; }

An element with Absolute position is always positioned according to the element which based relative.

Text :

Fruxinfo Pvt. Ltd