HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

Chapter 22: Relative Positioning

The final positioning system that we're gonna talk about is relative. And this way of positioning can be kind of tricky. Using it might not give you the results that you want to achieve easily. But before we get into that we have to talk about static positioning. And you might be thinking we didn't cover that. But static positioning is the default positioning system used when we don't specify any other type. So we've been using static positioning throughout this book. If you wanted an example, You could go ahead and add the position: static; code to one of your CSS rules that you didn't specify any other positioning system in. And you'll see that their is no change. The reason we needed to discuss static positioning is because relative positioning is like absolute positioning in the way that you will tell the browser that you want to move an element a certain amount from say the top and the left. But there is a difference between absolute and relative. That is if we use top and left coordinates to position an element with absolute it will display your element from the top and the left of the browser window in most cases, But relative positioning will display your element from the top and left of where it would have been displayed on the page with no positioning. So for example if you made a list of some type and you didn't give it any positioning code at all it would be positioned static by default. And then if you were to add a position: relative; with a top and left coordinate to your list it would move from where it was displayed originally by the amounts that you set with the top and left coordinates.

Quiz Chapter 22

1.What is the main difference between absolute and relative positioning?

2.A relatively positioned element will position according to what?