Decoding CSS Positioning: A Master Class with Paul O’Brien

Ralph Mason
Ralph Mason
Share

CSS Positioning with Paul O'Brien

Positioning elements on a web page can seem maddeningly difficult at times, especially given all the various methods available. And the options continue to expand, with the introduction of flexbox and grid layouts, as well as cool things like CSS3 transforms, which can also be used for amazing layout tricks.

In this forum dCode, CSS expert Paul O’Brien answers anything and everything about the tricky subject of CSS positioning — from floats and relative, absolute and fixed positioning to table display and even flexbox.

If you have any questions about CSS positioning, please join the conversation!

About dCodes

Our Forum dCodes are topics that feature a guest who conducts a deep dive into a subject area. Unlike our Q&A sessions, which run for just an hour, dCode topics stay open over a long period, so that issues can be discussed at greater length and in greater depth. You can ask questions, or just sit back and follow along, over time, as the guest answers questions and posts content of interest.

About Paul

Paul O’Brien is a widely recognized expert in all things CSS. He co-authored the landmark tome The Ultimate CSS Reference, and for many years has been a guiding light for many a developer wandering through the dark forests of CSS.

Have you heard of containing floats with overflow: hidden or similar? It was Paul who unearthed that technique back in the day.

If something can be done in CSS, Paul will know how to do it. He even regularly points out how to do things people thought weren’t even possible.

Paul’s Topic Starter

To start the thread off, Paul has created a small demo that simply places a small 50px fixed width and height red box to the right of the page. The html is basically as follows:

<div class="wrap">
  <div class="box">Box</div>
</div>

Before you look at the demo take some time and see how many ways you can think of doing this?

You may immediately think of about 3 ways to do this but as you delve into the details you find that there are in fact many ways to do this and in the demo I stopped at 15 but I wouldn’t be surprised to see quite a few ways I hadn’t thought of cropping up!

Here’s my demo and see if you can come up with other ways to do this:

See the Pen Box to the right by Paul O’Brien (@paulobrien) on CodePen.

The point of the exercise was simply to show that in CSS there are often many ways that a layout can be achieved and often the solution depends on what comes next as to what method is best to use. I often say that “the beauty of CSS is that there are many ways to do the same thing” but the difficulty for beginners is knowing which is the right way for the job in hand.

Now that you have looked at the demo (be honest here) how many of you thought of or understood the very first method in the demo?

This was the simplest and most basic answer and probably one of the first lessons learned and forgotten by most people and I will guess that few of you will have thought of it.

.box {margin:0 0 0 auto; width:50px; height:50px;background:red;}

It looks simple enough but how does that put a box to the right of the page?

We are all familiar with margin:0 auto which will center block elements horizontally but how does margin:0 0 0 auto; move a box to the right?

To answer this you need to refer to the specifications but a simplified example is that the width + padding + margins = width of the containing block.

Therefore, for a fixed width element that has a right margin of zero then the left margin must equal the distance left to the left edge of the containing block. This is achieved with a margin-left of auto.

If instead you put a margin-left of zero then the box moves to the left side and in ltr languages the margin-right zero would then equate to auto (even if you specify zero) in order for the requirements of the box model to hold true.

lastly if you put a margin-left and margin-right of auto then the box becomes centered as we all know and love.

(I have simplified the answer so read the specs for full details and understanding.)

I mention this auto margin technique because it is a prominent technique when using flexbox and an auto margin on a flex-item will move that element to the edge of the box (whether that be left , right up or down). Incidentally it is not well known that margin:auto on an absolutely positioned element will center the element both horizontally and vertically within a fixed height and width container.

That’s enough about margins anyway and have a look through the rest of the examples in the first demo and if you can think of more ways to do this then feel free to post or discuss.

If you don’t understand any of the examples then please discuss and we can clarify.

Note that this thread isn’t simply about this first post but mainly as a talking point to keep things moving so if you have topics you wish to discuss then please go ahead.

I look forward to answering or being baffled by your queries. I can’t guarantee to know all the answers but I’m sure if I don’t know the answer someone else will have a good idea and chip in to the conversation.

Follow this discussion further in the SitePoint forums.

Frequently Asked Questions on CSS Positioning

What is the significance of CSS positioning in web development?

CSS positioning is a fundamental concept in web development. It allows developers to control how HTML elements are displayed on a webpage. With CSS positioning, you can place an element exactly where you want it to be on the page, control the layout of multiple elements, and even overlap elements if necessary. Understanding CSS positioning is crucial for creating responsive and visually appealing web designs.

How does the ‘static’ value in CSS positioning work?

The ‘static’ value is the default value for the position property in CSS. When an element is set to ‘static’, it is positioned according to the normal flow of the document. This means the element will be displayed in the order it appears in the HTML, and it will not be affected by the top, bottom, left, or right properties.

Can you explain the ‘relative’ value in CSS positioning?

When an element is set to ‘relative’ positioning, it is positioned relative to its normal position. This means you can move the element from where it would be in the normal document flow, without affecting the position of other elements. The ‘top’, ‘bottom’, ‘left’, and ‘right’ properties will determine the final position of the element.

What does ‘absolute’ positioning mean in CSS?

Absolute’ positioning in CSS allows you to position an element relative to its nearest positioned ancestor or to the initial containing block if no positioned ancestors are found. The element is removed from the normal document flow, and no space is created for the element in the page layout.

How does ‘fixed’ positioning differ from ‘absolute’ positioning?

While ‘absolute’ positioning positions an element relative to its nearest positioned ancestor, ‘fixed’ positioning positions an element relative to the browser window. This means that even if you scroll down the page, an element with ‘fixed’ positioning will stay in the same place.

What is ‘sticky’ positioning in CSS?

Sticky’ positioning is a hybrid of relative and fixed positioning. An element with ‘sticky’ positioning is treated as ‘relative’ until it crosses a specified threshold, at which point it is treated as ‘fixed’. This can be useful for elements that should stick to the top of the viewport as you scroll down.

How can I overlap elements using CSS positioning?

You can overlap elements using CSS positioning by using the ‘z-index’ property. The ‘z-index’ property specifies the stack order of an element, with higher values being closer to the viewer. By giving one element a higher ‘z-index’ than another, you can make it appear on top of the other element.

How does CSS positioning affect the responsiveness of a website?

CSS positioning plays a crucial role in making a website responsive. By controlling the position of elements on the page, you can ensure that your website looks good on all screen sizes. For example, you might use media queries to change the position of elements depending on the viewport size.

Can I use CSS positioning to center an element?

Yes, you can use CSS positioning to center an element. One common method is to use ‘absolute’ positioning and set the top and left properties to 50%, then use the ‘transform’ property to move the element back by half its width and height.

What are some common pitfalls to avoid when using CSS positioning?

One common pitfall is forgetting that ‘absolute’ and ‘fixed’ positioning remove an element from the normal document flow, which can cause other elements to move around unexpectedly. Another pitfall is not testing your website on multiple screen sizes, as positioning that looks good on one screen size might not work on another.