CSS Positioning is one very important concept in making a layout. You can watch the video that explains it and a few other important properties at the fourth video here. If you do not want to watch the video, read on.

We use CSS Positioning to do exactly that. To position the elements in our layout. With the knowledge of CSS Positioning and the CSS Floats, we will be able to create even the most complicated layouts.

There are four CSS Positioning properties: static, relative, absolute and fixed.

---

The Static box like its name would suggest, is static and cannot move.
The Relative positioning can move to the left, right, up and down.
The Absolute positioning can be positioned anywhere without affecting or be affected by other elements on the page.
The Fixed Positioning will stay at where we position it even if we scroll down or up the page

---

Ok, so how do we position it using the CSS Properties?

Basically, it works like this. If we write left: 25px that means it will move 25px FROM the left (means it will move to the RIGHT). You can also put a negative sign in front to move it to the opposite direction. For example left: -25px means it will move -25px FROM the left, which also means it will move 25px to the LEFT.

If we do a theory lesson, then it won’t help you. So let’s learn from the Live Preview below..

• Try to add position properties such as left: 25px; to any of the Div and play with the values and learn how they move.
• Try also putting negative signs on it.
• Click on Do it for me to get a head start on playing with the codes

• Try scrolling the preview panel and see the fixed box stays fixed at its location.
• Lastly, try messing with the numbers and learn away!