About US
          Contact Us

CSS Absolute Positioning

Chapter - 17 : Element Positioning (CSS Absolute Positioning): (Page 2/2)

(Cotinued from previous page)

iv ) Absolute Positioning: An absolute position element is positioned relative to the first parent element and if no such element is found, then with respect to 'html' block.

h1 { position:absolute; top:30px; left:5px;}
Here h1 will be displayed at 30 px down from Top and 5 px from left from page margin. Opposite to 'Fixed Positioning' it will move up, if window scrolls.

If the positions of absolutely positioned elements are not proper, then they can overlap other elements.
Let us say we have defined h1 & h2 as (in css file)

h1 { position:absolute; color:'blue'; top:30px; left:5px;}
h2 { position:absolute; color:brown; top:32px; left:5px;}
and in our HTML file the command is
Command: (in HTML file): <h1>First Heading</h1>
<h2>Second Heading</h2>

Since the position of h1 and h2 is very close, you will get a output as Fig - 17.1

Overlapping: In case the position of two elements are overlappingCSS Absolute Positioning
, then the element which is positioned later will be in front.
To avoid this situation and to define the element, which will be at top (in case of overlapping), a 'z-index' is defined. This is also known as stack order.

h1 { position:absolute; top:30px; left:5px; z-index:-1}

z-index can be +ve or -ve . An element with greater z-index will be at top.
CSS Absolute Positioning © funandhobby.com (CSS Absolute Positioning)