CSS Content Positioning and Layout Modules

Positioning

• Static or auto: Respects the normal flow of content
• Relative: Lets us move something around without effecting other elements
• Absolute: Lets us position something around its parent element
• Fixed: Lets us position something around the viewport

Relative, absolute and fixed positioning unlocks the z-index controller which allows us to control the stacking context by overlapping and underlapping elements.

Static or auto

Respects the normal flow of content

Content follows the normal document flow. Kind of like we would expect in a word document.

    position: static;
    position: auto;
                

Relative

Lets us move something around without effecting other elements

Relatives are relative to their own positioning. They stay were they were before they became relative. But now the relative items can move around - top bottom left right - without it affecting the parent or the siblings.

Unlocks z-index

    .relative-element-1, .relative-element-2, .relative-element-3 {
        position: relative;
        opacity: 0.5;
        background-color: yellow;
        padding: 10px;
    }

    .relative-element-1 {
        top: 20px;
    }

    .relative-element-2 {
        left: 30px;
        top: 5px;
    }

    .relative-element-3 {
        left: 60px;
        top: -8px;
    }
                

Absolute

Lets us position something around its parent element

Out of flow - takes its positioning from the next parent that has its position set to anything other than auto

Unlocks z-index

The yellow footer has a position of absolute and bottom set to 0.

    #absolute-parent {
        position: relative
    }

    .absolute-element {
        position: absolute;
        top: 10px;
        left: 500px;
    }
                

Fixed

Lets us position something around the viewport

Unlocks z-index

The green sticky menu is always at the top of the viewport, because its position is set to fixed and top is set to 0.

    nav {
        position: fixed;
        top: 0;
    }
                

Modules and Properties

• Flexbox Display
• Grid Display
• Float Property
• Overflow Property

There are many ways to align and systemize content using CSS. There is no one way that is superior to others, and often a good solution requires using a grid within a flexbox within a grid.

Flexbox takes more basis in the content. Grid takes more basis in the layout.

Sometimes the only way to achieve what we want is still to use good old float.

CSS Flex Layout Module

CSS3 web layout model. Automatically rearranges depending on screensize. Good for one dimensional grids.

Allows us to control how content is displayed (row/column).

    // container
    #flex {
        display: flex;
        height: 200px;
        justify-content: space-around;
        align-items: stretch;
        background-color: pink;
    }

    // children
    .flex-element {
        flex: 1;
        margin: 0 20px;
    }

    //  Flex element big
    .big {
        flex: 3;
    }
                

flex: 1;

flex: 1;

flex: 1;

flex: 1;

flex: 3;

CSS Grid Layout Module

Easy to create both rows and columns - two dimensional grids.

    #grid-parent {
        display: grid;
        height: 200px;
        grid-template-columns: 20% 20% auto;
        grid-column-gap: 10px;
    }

    #grid-parent div {
        background-color: lightgreen;
    }

                

    #grid-parent-2 {
        display: grid;
        height: 200px;
        grid-template-columns: 10% 20% auto;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

    #grid-parent-2 div {
        background-color: lightpink;
    }

    #grid-parent-2 div:first-child {
        background-color: red;
        grid-column-start: 2;
        grid-column-end: span 2;
        grid-row-start: 1;
        grid-row-end: span 3;
    }

    #grid-parent-2 div:nth-child(5), #grid-parent-2 div:nth-child(6) {
        background-color: blue;
        grid-column-end: span 3;
    }
                    

Float Property

Floating content removes the content from the content flow and places it either top right or left of the parent div

To make sure that below content does not collapse we need to use clear: both (or left / right)

    .floated-element {
        float: left;
        width: 27%;
        margin: 1.5%;
        padding: 1.5%;
    }
                

Overflow Property

Overflow hidden will cut out any content outside the elements boundries

Overflow scroll adds a scrollbar

Overflow auto adds a scrollbar if it is necessary

    div {
        overflow: hidden;
    }
                    

    div {
        overflow: scroll;
    }
                        

    div {
        overflow: auto;
    }