Web Development: A Beginners Guide | Lesson 8: Advanced Positioning

This section is a little different, you won’t find yourself using this one as often to be honest, at least I don’t use it too often.

In fact the main thing I use it for is position headers to the top of a page and sometimes getting a floating button that drags the user back to the top of the page.

To start with open up your code and add a div with a piece of text saying this is positioned.

Next give the div a position of absolute and the text a position of relative.

Once this has been done you can set the top, bottom, left and right of the div and text to your hearts content. The absolute allows you to fix a div to anywhere on the page starting at 0px, 0px or the very top left of the screen.

As for relative positioning it does basically the same thing however the relatively positioned item is confined to within the space of the div containing it.

The last position attribute I will mention is fixed, this is how you create a sticky header! This is my most used one, if you alter the div to have a position of fixed and change top to equal zero, you will end up with a div that is stuck to the top of the page, even when you scroll! This is incredibly useful for those one page infinite scrolling type websites that you can click a button to get to each different section of the site.

That’s it for this lesson, a relatively quick one! If you have any other topics you would like me to cover let me know! Otherwise I’ll be back sometime soon with more basic web development for you!