relative positioning

position property sampler

diane laurie

Four values for the position property are...

  1. static (default)
  2. relative *
  3. absolute
  4. fixed

Static positioning is the default position value, which causes elements to stack one on top of the other separated by default margin settings. Paragraphs 1, 2 & 4 below use default positioning. The position value is set to relative positioning in paragraph 3. Assigning values to the properties top and left causes the paragraph to move down and to the right relative to the container from its original default position. However, the space occupied by the original static position is retained.

I am PARAGRAPH 1 with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings.

I am PARAGRAPH 2 with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings.

I am PARAGRAPH 3 with my position value set to relative. I have been moved down and to the right from my default position by assigning values to the properties top and left. The space occupied by my original static position is retained. To prevent me from overlapping the fourth paragraph, an adequate margin-top value needs to be assigned to paragraph 4.

I am PARAGRAPH 4 with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings. I am a paragraph with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings. I am a paragraph with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings. I am a paragraph with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings. I am a paragraph with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings. I am a paragraph with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings. I am a paragraph with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings. I am a paragraph with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings. I am a paragraph with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings. I am a paragraph with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings. I am a paragraph with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings. I am a paragraph with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings. I am a paragraph with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings. I am a paragraph with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings. I am a paragraph with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings. I am a paragraph with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings. I am a paragraph with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings. I am a paragraph with with no assigned position property. By default I use static positioning which causes elements to stack one on top of the other separated by default margin settings.

Valid XHTML 1.0 Strict graphic: Valid CSS 2.1