Tutorial 18: CSS Positioning, Part I - HTML with Style | 3

Tutorial 18: CSS Positioning, Part I

Relative positioning

Relative positioning is similar to static positioning, except that relatively positioned boxes can be moved around from where they normally should be. A relatively positioned box appears to be part of the normal flow as far as everyone else is concerned; it takes up space and moves its neighbours away from it to make space for itself, just like all statically positioned boxes, but it is displayed shifted in one or more directions. Here's an example:

P#two {
 position: relative;
 top: 1em;
 left: 1em;
}

<P ID="one">This is box one.</P>
<P ID="two">This is box two.</P>
<P ID="three">This is box three.</P>

The second paragraph is displayed 1em down and 1em to the right of where it should be, but otherwise nothing changes with the layout of the page. (If you're a bit confused, remember that the top and left properties specify the offset from the top edge and the left edge of where the box starts off, so the actual displacement is to the right and down). Relative positioning is a bit like absolute positioning with respect to the element itself. The important difference is, however, that with absolute positioning, the box is completely removed from the rest of the document, and other boxes are placed as if the element never existed; with relative positioning, other boxes behave as if the element was always there.

As you might have guessed, relative positioning is sort of useless most of the time. It is rarely needed to take a box and shove it in some direction just for the fun of it. However, relatively positioned boxes have a very useful property: Just like with absolutely positioned boxes, any absolutely positioned children of theirs will use them as a reference. Also, the top, bottom, left and right properties can all be left at their default value of 0. So, by taking an element, setting the position property to relative and leaving the offsets at zero, the box will be displayed at its original position, still take up space in the document flow, but also define a new set of co-ordinates for its absolutely positioned children.

https://www.internet.com/

Legal Notices.

URL: https://www.webreference.com/html/tutorial18/2.html

Produced by Stephanos Piperoglou
Created: February 15, 2000
Revised: February 16, 2000