5.2: Relative

An element that has a position of relative

• Will remain on the page according to normal flow of page.

• It _WILL _be affected by other positional properties and values.

Working off the same code that we just did in 5.1, make the following changes

1. comment out squareGreen

```css .squareBlue{ position: relative; width: 200px; height: 200px; top: 100px; left: 100px;

}

Where is squareBlue positioned? What is it positioned relative to?

Uncomment squareGreen. What happens? What is squareBlue positioned relative to now?

Explore More

Experiment with different values for the margin, top and left properties.

Then try the following margin values:

• 300px

• 50px

• 0px

Now, leaving the margin at 0px, try these values for the top property:

• 550px

• 50px

• 0px

Experiment with changing both the margin and top values together.