Normal positioning of content in an HTML page is left to right and top to bottom (This is called static positioning). But this type of positioning can be altered. This post tells you how to do this.
There are four types of Positioning. They are
Static positioning
Absolute positioning
Relative positioning
Fixed positioning
There is a CSS property called position. Using this property you tell a web browser what type of positioning you use. You position HTML elements using CSS properties like top, bottom, left and right.
Note: You cannot use top, bottom, left and right properties for static positioning.
Now let us see some differences in types of positioning:
Static PositioningAbsolute PositioningRelative positioningFixed Positioning
position property valuestatic (Since this is default no need to mention it.) absolute relative fixed
Meaning Default positioning in a web page i.e. left to right and top to bottom. Elements are positioned according to its container and properties (top, left, bottom and right). If no container is found then html page is considered as container Same as static positioning but top, bottom, left and right properties adjust the positioning of the element using it. When element is moved from its original position, that position is maintained and space is left Same as absolute positioning but its container is only html page.
Follow normal flow of elements (left to right and top to bottom) Yes No Yes No
Element using a particular positioning can be viewed by scrolling if it doesn’t fit browsing window Yes Yes Yes No
Here I have created four web pages. In all web pages design is same but only difference in each web page is value of position property. Please view HTML code(right click on page and select view source or view page source) View example View example View example View example
z-index
This property is used to determine which element will overlap which element. Element with higher number will overlap element with lower number. Here negative numbers are also accepted. View example here.
