CSS Positioning

This lesson is part of the Web Programming 1 Course.

In this lesson we'll go over the position property in CSS. As you know, the default behavior for block-level elements is to simply stack vertically. If you fill an element with block-level children, that element will stretch to accommodate all of the children. But by changing the position property of an element, you can change this default behavior.

Create a page named css-positioning.html and put this starter code in it:

<!DOCTYPE html>
<html>
    <head>
        <title>SAMPLE CODE - CSS POSITION</title>
        <style type="text/css">
            html,h1,header{margin:0; padding:0; }
            body{ height:2500px; }

            /* ALL OF THE CSS CODE SAMPLES GO HERE */
        
        </style>
    </head>
    <body>
        <header>
            <h1>CSS Positioning</h1>
        </header>
        <div id="content">
            <main>
                <h2>This is the main content area</h2>
                
                <!-- ALL OF THE HTML CODE SAMPLES GO HERE -->

            </main>
        </div>
    </body>
</html>

The Position Property

Here are some of the options you have for setting the position of an element:

Static Positioning

Whether you realize it or not, you are already familiar with static positioning. This is the default setting for an element. It means that block elements will occupy an entire line and stack vertically, while inline elements will occupy only as much width as needed for their content and line up horizontally.

Fixed Positioning

You can 'pin' an element so that it remains in the same position within the browser window (regardless of the scrolling). To do this, set it's position property to fixed.

You can 'pin' the header element to the top of the page by adding this CSS code inside the style element:

header{
    position: fixed;
    height: 60px;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 2;
    background-color:lightgray;
}

When you set an element's position to fixed, you'll find there are some strange side-effects, which is why added some of the other properties to the rule set. A fixed element is removed from the normal flow of the page (by 'normal flow' I mean the default static behavior for block-level elements to align themselves vertically). This means that you need to specify exactly where in the page the element should appear. To do this, you can set its top and left properties. I set them both to 0 pixels so that the element appears in the top left corner. In other words, its top edge is 0 pixels from the top of the browser window, and its left edge is 0 pixels from the left edge of the browser window

When an element is 'fixed', the elements that come after it in the code will appear to slide right over it as you scroll. To fix this problem I set the z-index property, which controls which elements appear on top when they overlap. The default z-index value for an element is 1. So, by setting it to 2, the element should be on top of all other elements in case overlapping occurs.

Relative Positioning

If you set the position property to relative for an element, then you can move it from where it would normally appear in the flow of the page. Since the div element (the one with its ID set to 'content') moved to the top of the page when we 'fixed' the header, we can push it back down to where we want it by setting its top property (60 pixels from the top of the browser window), like so:

#content{
    position: relative;
    top:60px;
}

It might be difficult to see how relative positioning is affected by this example because it's working in conjunction with the fixed header element. So here's another example that should make it more clear. First add this HTML code inside the main element just under the H2 element:

<ul>
    <li>Apples</li>
    <li class="special">Oranges</li>
    <li>Bananas</li>
</ul>

Now add this rule set to the style element:

.special{
    position: relative;
    top: 10px;
    right: 30px;
}

This positions 'special' elements 10px further from the top and 30px further from the right in to where they would normally be with position set to static.

Absolute Positioning

You can set up elements so that you can position them based on pixel coordinates. The coordinate system in programming is usually different than what we are accustomed from math. Coordinate 0,0 is at the top left corner of the screen.

In order to use 'absolute positioning' for an element, its parent container must be set to position:relative or position:absolute. Then you can set the element's top,left,bottom, or right position. Add these elements just under the UL element from the previous example:

<div id="game-board">
  <div id="game-object"></div>
</div>

If you were going to build a game with HTML and CSS you might use absolute positioning to do it. So I've created a div that represents the game board and within I put a game object. The following CSS code demonstrates how you could use absolute positioning to set the location of the game object within the board:

#game-board{
    position:relative;
    width:600px;
    height:400px;
    background-color:black;
}

#game-object{
    position:absolute;
    width:25px;
    height:25px;
    background-color:red;
    top: 100px;
    left: 200px;
}

We won't spend too much time on absolute positioning in this course as it is not nearly common as it once was. But it can come in handy if you are trying to do something out of the ordinary, or maybe for certain types of user interfaces.