Positioning elements

Positioning elements

Css allows to define exactly where an element should be rendered.

The possible values are.

PropertiesDescription
staticcorresponding to the normal flow (default)
relativethe element participates in normal flow but rendered with an offset relative to its normal position. After this translation, the element can overlap other elements
absoluteThe element is eliminated from the normal flow and is rendered with an offset relative to the first positioned parent element
fixedThe element is eliminated from the normal flow and is rendered with an offset relative to the view-port. Its position remains the same when the content of the page is scrolled using the navigation bars.
Notes
Note
- The element is positioned when the position property is set to any value other than static - The edges of the box corresponding to the positioned element are defined by the following properties
PropertiesDescription
top
right
bottom
left

The possible values are

PropertiesDescription
<length>
<percentage>
auto
inherit
Relative Positioning

Defines a relative position for an element.

position: relative -> And set the values for top, right, bottom and left properties.

snippet
<html> 
<head> 
    <style> 
        span{position:relative; top:20px} 
        i{position:relative; top:-10px} 
        down{position:relative; top:-20px} 
    </style> 
</head> 
<body> 
    This is an <span>example</span> for <i>relative</i> 
    <blockquote class="down">positioning</blockquote>. 
</body> 
</html>
Absolute Positioning

Defines a absolute position for an element.

position: absolute -> And set the values for top, right, bottom and left properties.

snippet
<html> 
<head> 
    <style> 
        span i blockquote{border: 1px solid #000000} 
        span { position: absolute; top: 30px;} 
        i { position: absolute; top: 80px;} 
        blockquote { position: absolute; top: 140px;} 
    </style> 
</head> 
<body> 
    This is an <span>example</span> for <i>absolute</i> 
    <blockquote class="down">positioning</blockquote>. 
</body> 
</html>
Fixed Positioning

Defines a fixed position for an element.

position: fixed -> And set the values for top, right, bottom and left properties.

snippet
<html> 
<head> 
</head> 
<body> 
    <div style="height: 500px"> 
        <img src="logo.png" style="position:fixed;top:50px; left:50px;"> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> content 
        <br> 
    </div> 
</body> 
</html>
Related Tutorial
4 Float
6 Clear
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #