How to use the Position and Display CSS Attributes

In web design, CSS (Cascading Style Sheets) gives you unprecedented control over how elements appear on a page. Two of the most fundamental tools within CSS are the ‘display’ and ‘position’ properties. Understanding how they work is a major step towards building the layouts you envision. Let’s dive in!

The CSS ‘display’ Property

The ‘display’ property dictates the basic way an element interacts with the content around it. Think of it as the element’s personality within the flow of the page. Here are the most common values you’ll encounter:

• block: Block-level elements take up a full line and stack vertically, like paragraphs in a book. Common examples include <div>, <h1>, and <p>.
• inline: Inline elements behave as part of the text flow, only using as much width as they need. Examples are <span> and <a> (links).
• inline-block: This value combines aspects of both ‘block’ and ‘inline’, allowing you to give inline elements some block-like features (like setting width and height).
• none: This completely hides the element, as if it wasn’t on the page at all.

The CSS ‘position’ Property

Where ‘display’ handles the fundamental behavior, ‘position’ deals with fine-tuning element placement. Key options include:

• static: The default. Things simply go where the normal flow of the webpage puts them.
• relative: The element is adjusted relative to its normal position. Crucially, other elements aren’t rearranged to make space for it.
• absolute: The element is taken out of the normal flow altogether. It’s positioned relative to its closest ancestor that also has positioning set (or the browser window if none exist).
• fixed: A ‘fixed’ element stays put in a specific location within the viewport, even when you scroll the page.
• sticky: A clever hybrid. It behaves like ‘relative’ until you scroll past a certain point, then it sticks as if it were ‘fixed’.

How They Work in Practice

Let’s see these in action:

• Overlapping Elements: Using ‘position: absolute’ (or ‘relative’) along with z-index is your key to layering elements over one another.
• Navigation Bars: Many navigation menus are ‘position: fixed’ to the top of the screen so they’re always accessible, even on long pages.
• Modal Dialogs (Popups): These are often ‘position: fixed’ and centered within the viewport.

Points to Remember

• The Containing Block: When using ‘absolute’ or ‘fixed’, an element is positioned concerning the closest parent with a ‘position’ setting (not ‘static’). If there isn’t one, it looks to the edges of the browser window.
• Browser Compatibility: Always be mindful that old browsers might have the odd quirk with how they handle positioning.
• Accessibility: Don’t change the ‘display’ type of elements in a way that confuses screen readers and other assistive technologies.

See it in Action

The best way to get a feel for ‘display’ and ‘position’ is to experiment! Visit popular websites, right-click on elements, and choose “Inspect” to see their CSS and play around with changing it.

Wrapping Up

Mastering ‘display’ and ‘position’ grants you immense power in how you can structure your web pages. Keep experimenting, and if you ever get stuck, there are always excellent resources online like the MDN Web Docs for reference.