Saturday, January 15, 2011

Absolute and relative measurements

In css there are many concepts that are confusing to me. So instead of juggling around with permutations and combinations evertime i hit the issue… i thought why not document them which can help me for future reference.

For absolutely positioned elements the right (or left) measures distance between the current elements right edge(or left edge) and its nearest positioned parents rightEdge(or left edge). While the relative positioning is measured w.r.t. its initial positioning.  Heres the example

@google chrome

<html>
<head>
<style type="text/css">
.right
{
position:absolute;
inherit:false;
right:0px;
width:190px;
overflow:visible;

background-color:#b0e0e6;
}
</style>
</head>

<body>
<div style="position:absolute;width:50%;border:1px solid red;padding:10;overflow:overflow" >
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
</div>
</body>
</html>

image
Both red and blue parts are absolute positioned
with right:10px; it measures 10px from the parents right edgs
The same code with position as relative gives the result image
the element (in cyan color) moves to make the initial reference line 10px to its right giving the above position.
red –> absolute and blue parts –> relative position
with right:10px; it measures 10px from its initial position (thick-black) to left
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)