<h1>

an <span>example</span> snippet of text

</h1>

CSS

span {

position: absolute;

left: 30px;

top: 10px;

}

Notice how the element moves again, but closes up the space that was once reserved for it. Absolutely positioned elements exist on their own, having no influence on other elements.

You can imagine how useful this can be. With absolute positioning we are able to take an element and render it exactly where we please on the page. This is hugely useful for content that sits outside of a typical page template. A section of key facts on a website might be an example of content that could make use of absolutely positioning an element.

It doesn’t end there, as absolutely positioned elements have one more feature to their makeup that is extremely useful. They are always positioned relative to their closest positioned ancestor. Double Dutch? Allow me to elaborate.

When we give an element any position value that is not ‘static’ (relative, absolute, fixed) we are ‘positioning’ this element. This positioned element then becomes the positioned parent to any elements nested inside it. If you so wish, you can then give a position to those child elements, which will then also become the ‘positioned ancestor’ to any of its children.

Let’s see some examples of how this relates to our ‘closest positioned ancestor’ statement.

First, let’s see this in action with the following code snippet: