WEEK: 9
Active: Not Currently Active
Work Due:
Overview
Box Size
Overflow
The Box Model
Padding
Margin
Borders
Intro to Display
Display Hidden
Position
Z-Index
Float
Intro to Layouts
Conclusions

Element Position

The Position Property

The next property to explore as we learn how to build layouts is position (position: ).

The position property allows developers to specify how elements are positioned in the browser window.

Box Offset Properties

The position: property sets the type of “layout flow” elements will follow. When set to a value that allows for the relative or specific positioning of elements, developers can use the following “box offset properties” to set those positions;

  • top:
  • bottom:
  • left:
  • right:

Depending on the value of the position: property, these will act in different ways. However, they basic function serves to set the position of an element, through either relative units (i.e. em, %) or absolute units (i.e. px).

Normal Flow

The default value for position is static (position: static;). Which causes elements to follow the “normal flow”. When you use HTML block level elements (i.e. <p>, <h1>, <div>, etc.), these follow static flow by default.

Relative Position

Setting the position property to “relative” (position: relative;) allows developers to specify an amount off of the normal flow position. Rather, when an element is set to relative, it will still follow normal flow, but can be moved, relative to that position.

NOTE: This does not effect the position of surrounding elements. These other elements will continue to be positioned where they would in normal flow. This is true even if the altered element is positioned over them.

In the below example, notice how the top: and left: properties are used to move the second paragraph to the lower-right of where its normal flow” position would have been.

CSS
.example-container p {
    max-width: 500px;
    color: #2f698e;
    background-color: #cccccc;
    padding: 1em;
    margin: auto;
}
.example-container .move-this-p {
    position: relative;
    top: 4em;
    left: 100px;
    color: #000;
    background-color: #e8e18c;
}
.example-container h1 {
    margin: auto;
    text-align: center;
    margin-bottom: 1em;
}
HTML
<div class="example-container">

    <h1>"Position: Relative" Example</h1>

    <p class="default-p">Minim do aute esse non quis anim qui cupidatat quis mollit magna tempor anim aliquip. Cillum Lorem excepteur consectetur esse veniam do aliquip deserunt anim anim do velit commodo. Sint pariatur incididunt fugiat aliquip adipisicing exercitation occaecat. Excepteur consectetur amet consequat eiusmod deserunt reprehenderit enim elit.</p>

    <p class="move-this-p">Notice that this paragraph is moved relative to where it would normally be positioned. This movement is so great that it is overlapping the paragraph below it. Also note that the amount of space the paragraph would have taken up in "normal flow" is still reserved. </p>

    <p class="default-p">Proident nulla ut velit occaecat non est officia eiusmod ut Lorem laborum irure exercitation non enim. Tempor duis amet eiusmod sint ipsum id tempor nostrud magna ea incididunt laborum. Non in adipisicing voluptate consequat irure amet aute enim eu sit velit veniam cupidatat non minim. Est laboris cupidatat do mollit proident fugiat cupidatat magna anim magna deserunt exercitation aliquip. Voluptate magna elit qui elit ea enim proident.</p>

</div>

"Position: Relative" Example

Minim do aute esse non quis anim qui cupidatat quis mollit magna tempor anim aliquip. Cillum Lorem excepteur consectetur esse veniam do aliquip deserunt anim anim do velit commodo. Sint pariatur incididunt fugiat aliquip adipisicing exercitation occaecat. Excepteur consectetur amet consequat eiusmod deserunt reprehenderit enim elit.

Notice that this paragraph is moved relative to where it would normally be positioned. This movement is so great that it is overlapping the paragraph below it. Also note that the amount of space the paragraph would have taken up in "normal flow" is still reserved.

Proident nulla ut velit occaecat non est officia eiusmod ut Lorem laborum irure exercitation non enim. Tempor duis amet eiusmod sint ipsum id tempor nostrud magna ea incididunt laborum. Non in adipisicing voluptate consequat irure amet aute enim eu sit velit veniam cupidatat non minim. Est laboris cupidatat do mollit proident fugiat cupidatat magna anim magna deserunt exercitation aliquip. Voluptate magna elit qui elit ea enim proident.

[View on GitHub] [Live Example]

Absolute Position

Setting the position property to ‘absolute’ (position: absolute;) allows developers to specify exactly where on a page an element should be location. This can be accomplished using the position properties mentioned above.

Setting an elements position to ‘absolute’ also has the effect of taking it “out” of the normal flow. This means other elements will not reserve space for this element.

In the following example, the second paragraph is placed 20 pixels from the top and 100 pixels from the left, regardless of what the other elements are doing or where they are positioned. As a result, this paragraph (.absolute-element) is positioned “on top” of the other elements.

CSS
.example-container p {
    max-width: 500px;
    color: #2f698e;
    background-color: #cccccc;
    padding: 1em;
    margin: auto;
}

.example-container .absolute-element {
    position: absolute;
    top: 20px;
    left: 100px;
    max-width: 300px;
    font-size: 2em;
    opacity: 0.8;
    text-align: center;
    color: #000;
    background-color: #e8e18c;
}

.example-container h1 {
    margin: auto;
    text-align: center;
    margin-bottom: 1em;
}
HTML
<div class="example-container">

    <h1>"Position: Absolute" Example</h1>

    <p class="default-p">Minim do aute esse non quis anim qui cupidatat quis mollit magna tempor anim aliquip. Cillum Lorem excepteur consectetur esse veniam do aliquip deserunt anim anim do velit commodo. Sint pariatur incididunt fugiat aliquip adipisicing exercitation occaecat. Excepteur consectetur amet consequat eiusmod deserunt reprehenderit enim elit.</p>

    <p class="absolute-element">I am placed wherever you want.</p>

    <p class="default-p">Minim do aute esse non quis anim qui cupidatat quis mollit magna tempor anim aliquip. Cillum Lorem excepteur consectetur esse veniam do aliquip deserunt anim anim do velit commodo. Sint pariatur incididunt fugiat aliquip adipisicing exercitation occaecat. Excepteur consectetur amet consequat eiusmod deserunt reprehenderit enim elit.</p>

</div>
[View on GitHub] [Live Example]

Fixed Position

Setting an element to “fixed position” (position: fixed;) is similar to using “absolute position” in that the position is in relation to the browser, instead of any parent elements. Unlike absolute position though, fixed position is in relation to the “viewable” portion of the browser. This means, that even when you scroll, an element set to “fixed” will remain viewable in the browser window.

This property can be used for “sticky” headers or other elements that you want always visible to the user.

Notice in the following example, that when you scroll, the “fixed element” stays put.

CSS
.example-container p {
    max-width: 500px;
    color: #2f698e;
    background-color: #cccccc;
    padding: 1em;
    margin: auto;
}

.example-container .fixed-element {
    position: fixed;
    top: 20px;
    left: 100px;
    max-width: 300px;
    font-size: 2em;
    opacity: 0.8;
    text-align: center;
    color: #000;
    background-color: #e8e18c;
}

.example-container h1 {
    margin: auto;
    text-align: center;
    margin-bottom: 1em;
}
HTML
<div class="example-container">

    <h1>"Position: Fixed" Example</h1>

    <p class="default-p">Minim do aute esse non quis anim qui cupidatat quis mollit magna tempor anim aliquip. Cillum Lorem excepteur consectetur esse veniam do aliquip deserunt anim anim do velit commodo. Sint pariatur incididunt fugiat aliquip adipisicing exercitation occaecat. Excepteur consectetur amet consequat eiusmod deserunt reprehenderit enim elit.</p>

    <p class="fixed-element">I am placed wherever you want. AND ALWAYS PRESENT!</p>

    <p class="default-p">Minim do aute esse non quis anim qui cupidatat quis mollit magna tempor anim aliquip. Cillum Lorem excepteur consectetur esse veniam do aliquip deserunt anim anim do velit commodo. Sint pariatur incididunt fugiat aliquip adipisicing exercitation occaecat. Excepteur consectetur amet consequat eiusmod deserunt reprehenderit enim elit.</p>

    <p class="default-p">Minim do aute esse non quis anim qui cupidatat quis mollit magna tempor anim aliquip. Cillum Lorem excepteur consectetur esse veniam do aliquip deserunt anim anim do velit commodo. Sint pariatur incididunt fugiat aliquip adipisicing exercitation occaecat. Excepteur consectetur amet consequat eiusmod deserunt reprehenderit enim elit.</p>

    <p class="default-p">Minim do aute esse non quis anim qui cupidatat quis mollit magna tempor anim aliquip. Cillum Lorem excepteur consectetur esse veniam do aliquip deserunt anim anim do velit commodo. Sint pariatur incididunt fugiat aliquip adipisicing exercitation occaecat. Excepteur consectetur amet consequat eiusmod deserunt reprehenderit enim elit.</p>

    <p class="default-p">Minim do aute esse non quis anim qui cupidatat quis mollit magna tempor anim aliquip. Cillum Lorem excepteur consectetur esse veniam do aliquip deserunt anim anim do velit commodo. Sint pariatur incididunt fugiat aliquip adipisicing exercitation occaecat. Excepteur consectetur amet consequat eiusmod deserunt reprehenderit enim elit.</p>

    <p class="default-p">Minim do aute esse non quis anim qui cupidatat quis mollit magna tempor anim aliquip. Cillum Lorem excepteur consectetur esse veniam do aliquip deserunt anim anim do velit commodo. Sint pariatur incididunt fugiat aliquip adipisicing exercitation occaecat. Excepteur consectetur amet consequat eiusmod deserunt reprehenderit enim elit.</p>

    <p class="default-p">Minim do aute esse non quis anim qui cupidatat quis mollit magna tempor anim aliquip. Cillum Lorem excepteur consectetur esse veniam do aliquip deserunt anim anim do velit commodo. Sint pariatur incididunt fugiat aliquip adipisicing exercitation occaecat. Excepteur consectetur amet consequat eiusmod deserunt reprehenderit enim elit.</p>

    <p class="default-p">Minim do aute esse non quis anim qui cupidatat quis mollit magna tempor anim aliquip. Cillum Lorem excepteur consectetur esse veniam do aliquip deserunt anim anim do velit commodo. Sint pariatur incididunt fugiat aliquip adipisicing exercitation occaecat. Excepteur consectetur amet consequat eiusmod deserunt reprehenderit enim elit.</p>

    <p class="default-p">Minim do aute esse non quis anim qui cupidatat quis mollit magna tempor anim aliquip. Cillum Lorem excepteur consectetur esse veniam do aliquip deserunt anim anim do velit commodo. Sint pariatur incididunt fugiat aliquip adipisicing exercitation occaecat. Excepteur consectetur amet consequat eiusmod deserunt reprehenderit enim elit.</p>

    <p class="default-p">Minim do aute esse non quis anim qui cupidatat quis mollit magna tempor anim aliquip. Cillum Lorem excepteur consectetur esse veniam do aliquip deserunt anim anim do velit commodo. Sint pariatur incididunt fugiat aliquip adipisicing exercitation occaecat. Excepteur consectetur amet consequat eiusmod deserunt reprehenderit enim elit.</p>

    <p class="default-p">Minim do aute esse non quis anim qui cupidatat quis mollit magna tempor anim aliquip. Cillum Lorem excepteur consectetur esse veniam do aliquip deserunt anim anim do velit commodo. Sint pariatur incididunt fugiat aliquip adipisicing exercitation occaecat. Excepteur consectetur amet consequat eiusmod deserunt reprehenderit enim elit.</p>

    <p class="default-p">Minim do aute esse non quis anim qui cupidatat quis mollit magna tempor anim aliquip. Cillum Lorem excepteur consectetur esse veniam do aliquip deserunt anim anim do velit commodo. Sint pariatur incididunt fugiat aliquip adipisicing exercitation occaecat. Excepteur consectetur amet consequat eiusmod deserunt reprehenderit enim elit.</p>

</div>
[View on GitHub] [Live Example]

Fixed Header Example

Using the fixed position also allows you to develop headers or menu bars that are “sticky”. Study the following example for how to create a “sticky header and menu”.

Notice, that when you scroll the below example, the header stays in place. Also notice, that in order to accomplish this look, we have to move the .main-content container down, so that it does not appear behind the header.

CSS
body {
    font-size: 12pt;
    margin: 0;
    padding: 0;
    background-color: #e2e2e2;
}

header {
    position: fixed;
    top: 0px;
    background-color: #26272b;
    font-family: sans-serif;
    text-transform: uppercase;
    margin-top: 0;
    height: 4.3em;
    width: 100%;
}

.menu-item, .site-name {
    display: inline-block;
    margin: 0 0;
    /*min-width: 8em;*/
    text-align: left;
    background-color: #26272b;
    padding: 0.5em 1em;

}

.site-name {
    float: right;
    padding-right: 1em;
    color: #ff0000;
}

.menu-item a {
    color: #fff;
    text-decoration: none;
}

.menu-item:hover {
    background-color: #673667;
}

.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    border: 1px solid #000;
    margin: 0.5em 0 0 -1em;
    color: #000;
    background-color: #fff;
    z-index: 1;
}

.dropdown-content a {
    color: #000;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-item {
    display: block;
    text-align: left;
    margin: 0;
    padding: 0.5em 1em 0.5em 1em;
    /*min-width: 7em;*/
}

.dropdown-item:hover, .dropdown-item:hover a {
    color: #673667;
    background-color: #a2a2a2;
}

/* Style the Main Content */
.main-container {
    margin-top: 5em;
    padding: 1em;
    line-height: 1.4em;
}
HTML
<body>

    <header class="">
        <div class="menu-item">
            <a href="#">Home</a></div>
        <div class="menu-item dropdown">
            <a href="#">Dropdown</a>
            <div class="dropdown-content">
                <div class="dropdown-item">
                    <a href="#">Dada</a></div>
                <div class="dropdown-item">
                    <a href="#">Haha</a></div>
                <div class="dropdown-item">
                    <a href="#">Yesterday</a></div>
                <div class="dropdown-item">
                    <a href="#">Today</a></div>
            </div>
        </div>
        <div class="site-name">
            Sticky Header Example
        </div>

    </header>


    <main class="main-container">
        <h1>Sticky Header Example</h1>
        <p>Officia velit ad deserunt ex qui anim amet ea fugiat adipisicing officia. Sunt anim elit ut amet enim dolore id consequat eu. Est in officia velit cillum ex mollit incididunt nostrud.</p>
        <p>Duis irure laborum ut minim elit duis laboris magna. Nostrud nulla do sit ex commodo duis deserunt ad voluptate eiusmod ullamco nisi deserunt. Pariatur labore dolor cupidatat ullamco anim Lorem adipisicing officia amet ut.</p>
        <p>Reprehenderit sit et in reprehenderit in enim anim enim magna aliquip. Velit sit commodo exercitation irure nisi enim consequat deserunt ea veniam dolore officia. Laborum aliquip qui ullamco nisi ut labore tempor amet deserunt veniam consectetur sint proident.</p>
        <p>Laborum culpa amet pariatur exercitation minim mollit id anim exercitation veniam deserunt proident veniam veniam ea commodo. Ullamco sint commodo tempor consequat elit do elit id id ea pariatur eu dolor. Sunt sit aliquip velit excepteur ad et eiusmod incididunt id voluptate anim ad et quis. Do veniam deserunt qui reprehenderit ex ullamco in aliqua amet adipisicing aute eu aliquip. Amet amet duis labore ut ullamco ea magna dolor cupidatat qui sunt. Aute elit veniam sit mollit labore tempor magna veniam reprehenderit veniam.</p>
        <p>Dolor dolore pariatur non veniam proident labore proident ea nostrud. Laborum ullamco commodo ullamco mollit sint quis dolore pariatur sunt enim cupidatat elit. Esse Lorem amet reprehenderit consectetur adipisicing irure velit enim adipisicing do aute. Laborum est nulla labore aute ipsum exercitation anim pariatur nisi et magna proident do ullamco. Enim dolore pariatur ipsum aliqua amet ipsum non voluptate ipsum ad officia excepteur eiusmod ea. Voluptate proident ex anim velit aliqua dolor nisi nulla aliqua ut.</p>
        <p>Sit cupidatat fugiat ut ut mollit Lorem ipsum ad. Et proident ipsum duis qui veniam minim non pariatur do irure ullamco velit commodo duis. Ad laboris consequat cupidatat fugiat laborum anim voluptate nostrud tempor sunt ipsum cupidatat anim est consequat ipsum nisi.</p>
        <p>Magna voluptate irure elit elit mollit id nulla elit commodo ad esse culpa id laborum do elit ad. Ut deserunt nostrud do labore proident do non. Culpa ex enim amet sint consectetur duis adipisicing.</p>
        <p>Veniam culpa irure mollit cillum consectetur veniam proident ea cupidatat tempor est est ex enim consectetur nostrud et. Anim officia qui ea esse qui tempor amet dolor labore dolor enim nostrud. Enim non id culpa nulla ut sunt mollit officia proident occaecat labore excepteur sint tempor irure nisi. Cillum mollit commodo laborum magna eu dolore id consequat anim irure mollit veniam deserunt labore ut veniam. Quis eu pariatur veniam excepteur ad non cupidatat et. In veniam culpa veniam irure et commodo velit amet. Culpa sint fugiat irure ut enim enim labore exercitation est officia ad laboris. Quis culpa commodo laboris est amet velit laborum cupidatat do ad minim non qui reprehenderit sint elit culpa.</p>
    </main>


</body>
[Code Download] [View on GitHub] [Live Example]
Previous section:
Next section:
Overview
Box Size
Overflow
The Box Model
Padding
Margin
Borders
Intro to Display
Display Hidden
Position
Z-Index
Float
Intro to Layouts
Conclusions