Tutorials - CSS - Position

Elements in CSS can have two kinds of position: relative - where the element is placed relative to the elements around it before taking into account any adjustments, and absolute - where the element is placed in the top left of the available space before adjustments are made. Both have their uses, as relative is good for pages which have fluid displays and can easily adapt to changes in the browser size, absolute is good for layouts which need to be pixel perfect, such as artistic layouts. Both are easy to add to your elements:

h4{
    position: relative;
    top: 10px;
    left: 5px;
}

p{
    position: absolute;
    top: 3em;
    left: 5em;
}

We'd recommend looking at the source of some of your websites to see how thee can be used in practice - a contrived example could show you a rough estimate of how they work, but seeing them used in practice will demonstrate their use much more effectively.

Page Responses

Currently there have been no responses to this page...

Post Response

If you have anything to contribute to this tutorial, found a bug, or know a better way of achieving the same goal, please leave your response below.