There are for classes of positioning in CSS using the position property. The default is static. This positions the elements in the order they appear. Each element appears after the one that comes before it in the HTML file and before the ones that come after. Once an element is positioned, we can't change it. The relative setting is the most useful. It initially positions the element just like static but we can move it after that. The movement is relative to its normal position. There are two properties that control this. The top changes the position relative to the top of the parent element. The left property does the same thing from the left edge. These can take negative values. Increasing the top value moves it down the page. Increasing the left value moves it right on the page.

Here is an example of relative positioning. I have a block of text and a picture and I move the text to the left to put it partially over the picture. I put a border around the text to make it stand out more.

absolute is just that. Treats the element like a separate little window that can be position at specific x and y coordinates. The fixed position doesn't work in most browsers. But if it did, it works like absolute, but the element doesn't scroll, even if the rest of the page does.

We can also position the element out from the page. This is referred to as the stacking order. We don't actually get 3-D graphics but when two or more elements overlap, we can control in what order they overlap. Normally, they are stacked in the order the browser sees the elements. Later elements are stacked on top of earlier ones. So, in the same example we have a second picture that comes on top of the text. This shows the relationship between the coordinate axes and the properties that are used to alter them. 3D axes