> For the complete documentation index, see [llms.txt](https://eleven-fifty-academy.gitbook.io/javascript-152-advancedcss/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eleven-fifty-academy.gitbook.io/javascript-152-advancedcss/part-5-positioning/5.2-relative.md).

# 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.