Understanding Positioning

I’m been doing the Build a Website Design System project, however, I’ve got confused what the scenario would be when to use Display Inline-Block, Float or Position Absolute/Relative.

On this project I used all 3 methods to try and fully understand all of them. The colors section, I’ve got 6 different colors (2 rows of 3), so I used Float Left. The Fonts section I used Display Inline-Block (2 columns of 3). And for the Text Styles section, I used Position Absolute (2 rows of 2 boxes). If I’m correct, I think I could of used Display Inline-Block for all of them.

As far as I can see, would you only consider using a Float for images with text wrapped around it?

Also, when would Position Absolute/Relative is useful?

I have not played with the float very much so can’t say for sure on that.

Position absolute will make other elements ignore that items presence, it can be useful for overlapping elements, such as putting a block of text on top of a picture.

And position relative can be used for moving an object relative to its given position.
One of my favorite ways to use this is making buttons that look like they are being clicked when you click them :grinning::

HTML:

<div class="button">
    <a href="put you source path here">Name of Button<a>
</div>

CSS

button {
    color: blue
}

button a {
    border: 5px outset darkblue;
    position: relative;
}

button a:active {
    border: 5px inset darkblue;
    top: 2px;
}

Float is useful with images but also useful when making a dropcap first letter in a paragraph like so.

Great answer here about floats.

Relative and absolute, I will use when I need to put an element exactly where I need it. In other words, I need more precision than a justify-content, align-items or text-align property will give me.

Or I’ll use it when I need random spacing on the webpage to be populated. Like, I’m trying to mimic randomness positioning (i.e. in nature). Here’s a food example placing toppings on a pizza (you never know when you’ll be working for Domino’s :pizza:)

The secret sauce about absolute is if you make its parent container position relative then it is absolute to its parent container. In other words, using the top/bottom/left/right properties are confined to the parent container. So top 0% and left 0% is the upper left corner of the parent container. So you can get very exact positioning within any parent container.

2 Likes