​x
 
<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
p {
    position:relative; display:block;
    width:85%; height:100px;
    top:0px; left:0px;
    margin:2px auto; padding:2px 10px;
    border:2px ridge #efe;
    color:#333;
}
p+p {
    color: #555;
    font-style:italic;
}
img {
    position:absolute; z-index:1;
    top:0; right:0px;
}
img+img {
    position:fixed;
    left:0px;
</style>
</head>
​
<body>
​
<img src="../../../img/tutorials/abspos_ex1.png" alt="css image" />
<img src="../../../img/tutorials/fav_ex1.png" alt="css image" />
​
<p>Paragraphs in this document are laid out as normal flow boxes. The LOGO in the left corner is positioned as <i>fixed</i> and the IMAGE on the right is taken out of the flow due being positioned as <i>absolute</i></p>
<p>In the normal flow, boxes participate in the layout formatting context. The block boxes are part of the block formatting context while the inline boxes are part of the inline formatting context.</p>
<p>The absolutely positioned elements offset a box in respect to its containing block. It affects no elements and their boxes around self, whether they are rendered in a normal flow, as floats or as other absolutely positioned boxes.</p>
<p>To make an element or its box being positioned absolutely, the <i>position</i> property must be set to the value <i>absolute</i> or <i>fixed</i>.</p>
<br />
<p style="text-align:right; border:none;"><b>brenkoweb.com</b></p>
</body>
</html>