JavaScript and CSS Positioning Example

Red Div


Both the red and green bot images have the same values for position, top, and left. The img element for the red bot is nested inside this div, (with a red background) so you might expect the image to be inside this div. However, the "containing element" for the red bot image is the body because the red div's position attribute is not set (and defaults to static).


Green Div

This div has its position set to relative so that it becomes the "containing element" for the green bot image. The green bot image will be positioned with respect to this div, not with respect to the body.

Blue Div


You can change the value of the position property of the blue bot image using the selector and button above.

The blue div's position property is not set, so it defaults to static.

Note: Depending on the value of the position property of the blue bot, it might sometimes be in the same place as the red bot. Also, if you set the position to fixed, try scrolling the browser window to see what happens with the blue bot image. (You might need to make your browser window shorter to see the vertical scroll bar.)