TUTORIAL: CSS Positioning

Discussion in 'Web Design' started by PixelPusher, Mar 24, 2010.

to remove all ads.
Thread Status:
Not open for further replies.
  1. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Hello all,

    Several people have been asking about the different types of css positioning...how to use them, is one better than the other, troubleshooting alignment, etc.

    I figured it would help if I posted a thread covering some basics. All this information I have gathered through various websites and forums. I am just posting what I have learned through the years. The sole purpose of this thread is to show others how these techniques are implemented. So, without further adieu, here it is:

    HTML:
    <div class="rel">
    	<h2>#1</h2>
        <p>relative position</p>
    	<div class="abs">
        	<h2>#3</h2>
            <p>absolute position</p>
        </div>
        <div class="stat">
        	<h2>#2</h2>
        	<p>static position</p>
        </div>
    </div>
    <div class="fix">
    	<h2>#4</h2>
        <p>fixed position</p>
    </div>
    
    Code:
    body, div, h2, p {
    font-family:Arial, Helvetica, sans-serif;
    color:#fff;
    margin:0;
    padding:0;
    }
    h2 {
    font-size:18pt;
    }
    p {
    text-transform:capitalize;
    }
    div.rel, div.abs, div.fix, div.stat {
    font-size:10pt;
    border:solid 1px #333;
    padding:20px;
    margin:0;
    }
    div.rel {
    position:relative;
    width:500px;
    height:500px;
    margin:50px auto;
    background-color:#030;
    }
    div.abs {
    position:absolute;
    bottom:-25px;
    right:-25px;
    width:150px;
    height:50px;
    background-color:#093;
    }
    div.fix {
    position:fixed;
    right:5px;
    bottom:5px;
    width:75px;
    height:300px;
    background-color:#9C0;
    }
    div.stat {
    border:solid 1px #fff;
    background-color:#063;
    height:70px;
    margin-top:20px;
    }
    
    Static Position
    The default setting for an element. It will follow the normal html flow of the page. Element cannot be adjusted with the "top, right, bottom, and left" values.

    Relative Position
    Element is positioned in the normal html flow of the page and its content can be adjusted (offset) using the "top, right, bottom, and left" values.

    Absolute Position
    Element is removed from the normal html flow. Position is adjusted through the "top, right, bottom, and left" values and is based on the first parent container that has a position set to a value other that static.

    Fixed Position
    Element is removed from normal html flow. Position is adjusted through the "top, right, bottom, and left" values. These values are based on the html tag (browser window).

    Any questions/comments or other recommendations feel free to chime in :D
     
    Last edited: Jul 16, 2012
  2. emilyl

    emilyl New Member

    Messages:
    74
    The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big
     
  3. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Yes there is fairly simple solution for what your asking, but please post new questions in a new thread! :D

    What you will need to use is "fixed" position. I will start the the thread for you this time around.
     
  4. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    I never knew you couldn't use top, left, etc. for static position. That explains so many of the issues I've had with positioning!
     
  5. Sabooru

    Sabooru New Member

    Messages:
    10
    hi pixelpusher. I was going to make another post asking a bit regarding this but i figured you'd prefer me to post here than start a new conversation..

    what I'm missing in regards to css positioning is how to center objects on a page. I've been playing with it a lot and looking at various examples but all of them seem to use CSS relative positioning. The problem is... everything starts pushing eachother around the page when you use it.


    I initially used absolute positioning when I started designing my page and it worked well enough for me..
    http://www.sillybomb.com

    but now I've realised I want to switch to a centred view
    http://www.sillybomb.com/indextrial.php

    and I'm having a lot of troubles with the elements needing to have negative values etc.. and being illogically positioned in css to flow naturally on the page. Right now I've left it as you can see and the logo is being pushed downward by the shadow on the left.
    I must be missing something simple I think..
    Reckon its worth making a new thread for it?
     
  6. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Put the div with the "logo" class inside the one with the "headerBG" class.

    Cool logo.
     
  7. Sabooru

    Sabooru New Member

    Messages:
    10
    What about objects that span the entire page though. For example on another page I'm working on I'm creating a shadow to go behind the page content, however the shadow pushes the entire page down.

    Eg. www.deakintv.com

    the div to the right should match up next to the header div
    I can't place it inside the header because then it will only span the size of the header.
    And when I place it outside the header it moves underneath. The only way to get it to the top is to set its beginning position to a negative. As soon as I start adding a bunch of elements to the page the maths is going to become mind-numbingly ridiculous. Is there no other way?
     
  8. CodeMyConcept

    CodeMyConcept New Member

    Messages:
    1
    Robert

    This website might help you http://www.html.net/ but there are a lot of articles and communities ready to help others too!
     
  9. Walter Warner

    Walter Warner New Member

    Messages:
    18
    I may have missed this but in order to make an absolute element work, you would have make sue that the div that holds it is set to relative. Otherwise you will get a jumbled mess. By the way can anyone think of an example of where I would want to use an element with fixed positioning? I am new to web design.
     
  10. LeeHarris

    LeeHarris New Member

    Messages:
    8
    There are many examples of where fixed positioning is useful. However, the 2 most commonly used are for fixing a background position - http://gradcolor.com/example-bg-att.php?att=yes (horrible web page but it gives you an example) or a fixed side bar or contact button - http://www.teehanlax.com/ (this is a nice example of a fixed side bar).
     
  11. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
    I realise this is a very old thread BUT there is an error in it.

    relative positioning does not actually work like that.

    The box created by the element stays in the same position as it would be when static and occupies the same space in the document flow at that location. It is the content area that simply DISPLAYS in an offset position according to the values.
     
  12. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    It's not an error, it simply could be explained in more detail, like you have so mentioned. Thanks.
     
Thread Status:
Not open for further replies.

Share This Page