relative offsets

by fezec

HTML

<p>
    <span class="rel_pos">this</span>
        <span class="rel_pos">is</span>
        <span class="rel_pos">a</span>
        <span class="rel_pos">paragraph</span>
</p>

CSS

p{
    position:absolute;
    width:50%;
    height:300px;
    background:red;
    top:0;
    left:0;
    margin:1em;
}

.rel_pos{
    position:relative;
    border:1px solid black;
    top:0;
    left:0;
}

p{
-moz-transition-property:top, left;
-moz-transition-duration:250ms;
-moz-transition-timing-function:linear;
-moz-transition-delay:0s;
}



.rel_pos:nth-child(1){
    top:50px;
    left:-20px;
}

.rel_pos:nth-child(2){
    top:-10px;
    left:30px;
}

.rel_pos:nth-child(3){
    top:-40px;
    left:-80px;
}


.rel_pos:nth-child(4){
    top:40px;
}

.rel_pos{
 
-moz-transition-property:top, left;
-moz-transition-duration:250ms;
-moz-transition-timing-function:linear;
-moz-transition-delay:0s;
}

JavaScript

$("body").click(function(e){
    
       $(".rel_pos").each(function(){
           $(this).css({top:0,left:0}); 
    });
    
    $("p").each(function(){
         $(this).css({left:"50%"});
    });        
    
});