Assignment029j3

Positioning - Relative

Not only can we use divs to create structure for our page, we can use divs to create elements that are placed at specific locations on a page relative to their normal position.

For example, I can specify CHANGES to top, bottom, right, and left pixel position for relative positioned divs. That element will be moved from its current position based on the values given to top, bottom, right, and left. Unfortunately, they only visually move. The occupied space is still "taken."

Use CSS to move the elements below around from their normal position.

What will happen if you set the red div's top to -15px? What will happen if you set the black div's left to -20px? They get moved from their location, but they still occupy that "space."

Play with the following:

To get credit, add position relative and top, bottom, left, or right values to the div elements below. Also, add 4 new div elements.

This id is lavender
This id is soft yellow
This id is light pink
This id is lime
This id is deep red
This id is seafoam green
This id is smokewhite
This id is charcoal grey
This id is skyblue

msiga-s263@chusd.org