In the past two course parts, you saw how to create layouts using new, powerful tools like CSS Grid and Flexbox. These tools didn't always exist, though. They're recent from the past few years.
Let's recap how an element's position is usually determined. An element will have a default display property whose value is either
inline-block , or
block-levelelements start on new lines and take up the full width available to them
inlineelements take up only as much space as they need and do not start on new lines
inline-blockelements can display side-by-side but still can have width and height properties, which regular inline elements cannot
Since these properties determine elements' positions, bear them in mind as we go further with layout properties.
Even without using Flexbox or CSS Grid, you can adjust where an element appears on a page by using a property called
position property's default value is
static . This just means the element appears where it normally would in the flow of your HTML document. Additional possible positioning properties we'll explore include
absolute , and
The first alternative position property we will explore is
relative positioning. Setting a position to
relative means you can position it relative to where it would normally be.
Let's explore positioning through the following example: the beginning of an article on New York's coffeeshops. The HTML and CSS behind this starter page are below the image:
New York's best coffeeshops
New York, NY 10003
There are multiple Bean locations in the city. It's a good place to get work done because they're open late.
240 Sullivan St
New York, NY 10012
Coffee and donuts! What more could you want?
margin: 0px auto;
We'll focus on the image element in particular. There are no custom position values on it right now, so by default, its value is static.
Setting a position value of relative doesn't change anything right away:
You must also supply the exact relative positioning values you want using top, bottom, right, and left in order to see a change. Setting top: 40px; and left: 30px will move the element 40px from the top of where it'd normally be and 30px from the left of where it'd normally be:
Notice that now the image overlaps with the "Manhattan" heading. Setting custom positioning values like this can be a little risky because your other elements don't automatically readjust themselves accordingly! That's why CSS Grid and Flexbox are so powerful: other elements usually adjust accordingly to the positions of the elements around them.
The second custom positioning value we'll explore is absolute positioning.
Absolutely positioned elements are set relative to their nearest explicitly positioned ancestor. If you haven't explicitly set any positioning values on previous elements, the absolutely positioned element will appear relative to the edges of the document. Define offset values for absolutely positioned elements the same way you would for relatively positioned elements: by defining top, bottom, left, or right values.
Let's change our coffee image to have an absolute position, offset by 10px from the top and 30px from the left:
Notice that the image appears to have been visually removed from where it was before and is floating up in its own little world as if it weren't even in the article anymore! Its position is determined by the edges of the document since there are no other explicitly defined position values on preceding elements.
If you scroll down the page, the image stays exactly where it is. It does not scroll with the page. That's important to remember as we check out one last custom positioning value.
The last positioning value we'll see here is fixed positioning. This is similar to absolute and relative positioning in that you have to set top, bottom, left, and right values. However, an element with a fixed position will scroll with the page and will often be positioned relative to the entire viewport, except in a very specific subset of cases. It will always stay exactly where it is, visually, as the rest of the page scrolls normally. This can look goofy sometimes but can, in fact, be useful for elements you want to have displayed permanently on the side of a page, no matter whether the user is at the top or bottom of the page (like a digital assistant or chatbot option).
Let's reduce the size of the coffee image, move it to the top right of the page, and change its positioning to fixed:
Now, if you were to scroll up and down this page, the coffee element would never move!
While setting positions using relative, absolute, or fixed values may seem like a straightforward idea, you'll sometimes find these solutions to be outdated. They are also easily broken. They don't respond to different screen sizes, meaning you need to hardcode the values you want in different media queries for different screen sizes. You'll rarely want the same positioning for an element on a desktop and on a mobile device.
Nonetheless, you'll see this kind of code in older code bases or in situations where there was no other option for positioning an element in a linear, grid-oriented way.