In this final CSS chapter, we will complete your teaching in this language with positioning, overlapping and overflow. Let’s get started.
While floats are a great way of arranging elements around your webpage, they aren’t enough to satisfy every demand when positioning elements. This is where the positioning property comes into use. So far we have only looked at elements that sit within the constraints of the flow of the webpage, but sometimes we want a bit more control over our elements. Let’s see how making use of the positioning property opens up new possibilities for how we render our elements on our webpage.
The position property accepts five possible values:
Each of these values have their own use-cases and quirks, so let’s work through them in more detail to further understand how we can make the most of their benefits.
We start with static positioning as this is the default position value for all elements. Static simply means that the elements are positioned how they occur inside the flow of the page. So just as we have seen already, this simply means that elements will sit naturally depending on whether they are a block or an inline element. Static elements can have floats applied to them to take them outside of the flow, as we have seen in the ‘floats’ section. Simplistically speaking, static simply means standard.
Here’s where things start to get a bit more interesting. Relative positioning adds the possibility of moving the element around the page while still preserving the space from its initial placement on the document. This sounds complicated, but it’s actually very simple.
If we observe a typical div created with the following HTML and CSS code: