Positioning Elements in CSS

This tutorial is part of a web programming course for people who have no programming experience.


In this lesson we'll quickly 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 accomodate all of the children. But by changing the position property of an element, you can change this default behavior. 

<!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 the options you have for setting the position of an element:

  • static - This is the default position setting for each tag, and you already know that block-level tags position themselves by stacking vertically, and inline tags fall inline and wrap automatically.
  • absolute - You can control the position of an element by setting it's pixel coordinates (top, left, bottom, right)
  • relative - You can control the position of an element relative to the nearest 'positioned' ancestor.
  • fixed - You can 'pin' an element so that it stays 'fixed' at a certain point, regardless of how much the user has scrolled down the page.

Static Positioning

Whether you realize it or not, you are already familiar with static positioning. This is the default setting for an element, and it means that block-level elements will flow down the page vertically.

Fixed Positioning

You can 'pin' an element so that it remains in the same position within the browser window (regardles 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 ruleset. 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.

In the video we had another problem from setting the HEADER to use fixed positioning. Because it was removed from the normal flow, the DIV element below it became the first element in the flow, which pushed it to the top of the page. We can fix that by using relative positioning.

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) 

#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 CSS code to the STYLE element:

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

This example targets the second LI element in the list (of fruits). By setting it's position property to relative, you can then set the top, left, bottom and right properties.

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 myou 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.

NEXT LESSON: Floating Elements in CSS