Information Communication Technology ICT – 12 Images | e-Consult

Absolute Positioning: Absolute positioning places an element relative to its nearest positioned ancestor (an ancestor with a position value other than static). If no positioned ancestor is found, it's positioned relative to the initial containing block (the element). It uses top, right, bottom, and left properties to specify the exact pixel coordinates of the element. It takes the element out of the normal document flow.

Example:

<div style="position: relative; width: 200px; height: 150px; border: 1px solid black;">
<img src="logo.png" style="position: absolute; top: 10px; left: 10px;">
</div>

In this example, the image will be positioned 10 pixels from the top and 10 pixels from the left of the div with position: relative;.

Relative Positioning: Relative positioning positions an element relative to its normal position in the document flow. It uses the top, right, bottom, and left properties, but these values are relative to the element's original position. It does not take the element out of the normal document flow.

Example:

<div style="position: relative; width: 200px; height: 150px; border: 1px solid black;">
<img src="logo.png" style="top: 10px; left: 10px;">
</div>

In this example, the image will be moved 10 pixels down and 10 pixels to the right from its original position within the div.