relative positioning

Shows how child elements are positioed relative to the parent when the parent uses relative positioning.

by Vimla Ramdoo

HTML

<div class="parent">
    <p>Parent</p>
    <div id="box1" class="child">top: 0px;<br/>left: 0px;</div>
    <div id="box2" class="child">bottom: 5px;<br/>left: 10px;</div>
    <div id="box3" class="child">top: 30px; right: -25px;</div>
</div>

CSS

/* Try this
1. Resize the window and watch what happens to the child elements
2. On line 8, replace position: static; with position:relative;
3. Resize the window and watch what happens to the child elements

*/
.parent {
    position: static;   /* static positioning is the default */
    background-color: palegoldenrod;
    margin: 100px;
    width:  200px;
    height: 200px;
}

.child {
    position: absolute;
    background-color: goldenrod;
    width:  75px;
    height: 75px;
}

#box1 { top:0px;    left: 0px; }
#box2 {bottom: 5px; left:10px; }
#box3 {top: 30px;   right: -25px;}

body {
    margin: 0;
    padding: 0;
    background-color: steelblue;
}