position property sampler
absolute positioning
Four values for the position property are...
- static (default)
- relative
- absolute
- fixed
absolute positioning uses the position properites of top, left, bottom, and right to move an element out of the document flow and position it with respect to its ancestor element. Paragraphs 1, 2 & 4 below use default positioning. The position value is set to "absolute" in paragraph 3. Although the values for top and left are the same as they were for relative positioning, it has moved up and to the right so that it is now positioned with respect to its ancestor element in the markup hierarchy, which is the light blue container. The space occupied by the paragraph's original static position is not retained. Because the container moves when the page is scrolled, the paragraph also moves when the page is scrolled in order to retain its absolute positioning.
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 absolute. Although the values for top and left are the same as they were for relative positioning, the space occupied by my original static position is not retained and I have moved up and to the right. I am now positioned with respect to the light blue container, which is the ancestor element in my positioning context.
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.
