Lesson 12

Positioning

Beyond margins and floats

If you want to fix elements to the page, or position a design element precisely, we're going to need more than just margins.

Top, right, bottom, left

Elements have top, right, bottom and left (TRBL) properties that can be used to position them precisely on the page.

Position: static

Elements are, by default, positioned statically on the page. This means they follow one after the other. Static elements will ignore TRBL properties.

Position: absolute / relative;

To take advantage of these properties, we have to set an element's position property. Setting it to absolute allows other elements to flow through it, essentially removing it from the page structure. It will also sit in the top-left of the browser window. We can then position it using the TRBL properties.

This is where position: relative; comes in – if you set the element's parent position property to relative, our absolute element will sit relative to it, rather than the browser window. You're saying, elements inside me should sit relative to me, rather than the document.

Position: fixed;

If we set an element to position: fixed; it behaves exactly like an absolutely positioned element, it just doesn't move on scroll. This is very handy.

z-index

Absolute and fixed position elements can overlap each other. To determine the order of the stack of elements, we use "z-index". Elements with high z-index values sit on top of other elements.

Play
Go to the next lesson

index.html

style.css

the web page

New Window

Tasks

  • Add position: relative; to the #wrapper. What should happen?
  • Add z-index: 10; to the red box. What happens?
Next Lesson
Practical understanding of HTML/CSS layout and positioning using margins, position properties and z-index. Badge

Intermediate Design with CSS

Congratulations! You’ve just earned the Intermediate Design with CSS badge!

If you'd like to send this badge to your Mozilla backpack, just fill out the form below.

This will push your badge to the Mozilla Badge Backpack which is governed by the Mozilla Badge Backpack Terms of Use and Privacy Policy.