Managing Content position for your content in HTML5 applications

CSS3 module http://www.w3.org/TR/css3-positioning/ describes features related to positioning and stacking of elements. This module extends CSS level 2, but the main difference between the two is the ability to position elements based on Region boxes.

CSS3 supports positioning elements independent of document order. Elements can be placed in any order, overlapping, and even one over the other.

 

Relative positioning

Changing the position of a box by accounting for an offset after it has been laid out according to the normal flow is called relative positioning.

The subsequent boxes are not repositioned even if the current box is repositioned. A box which is relatively repositioned keeps its normal flow size.

Here is an example of how to define a relative positioned element.

p.pos_left {
    position: relative;
    left: -100px;
}

  In the above example, we have moved it left by 100 pixels.

 Absolute positioning

In this model, a box is explicitly offset w.r.t. its containing block. This does not impact the layout of other elements since the absolute positioned element is removed from the normal flow. These elements can also overlap other elements.

Here is an example of how to define a relative positioned element.

p.pos_left {
    position: absolute;
    right:  100px;
}

  In the above example, we have positioned it right by 100 pixels.

Center positioning

In this model, a box is explicitly centered w.r.t. its containing block. Like absolutely positioned element, a center positioned element is completely removed from the normal flow. It establishes a new containing block for normal flow children and absolutely positioned descendants.

p.pos_left {
    position: center;
}

 

Page positioning

In this model, a box is explicitly offset w.r.t its containing block, which implies that it is removed from its containing block.  Like center positioned elements, a page positioned element establishes a new containing block for normal flow children and absolutely positioned descendants.

p.pos_left {
    position: page;
}

 

Fixed positioning

This is very similar to absolution positioning; the only difference being that in a fixed positioned element, the containing block is established by the viewport.

p.pos_left {
    position: fixed;
}

Types of offsets

In the positioning options, there are 4 properties which can be changed.

• Top – which specifies how far an absolutely positioned box’s top margin edge is offset below the top edge of the containing block.
• Right – which specifies how far an absolutely positioned box’s right margin edge is offset to the left of the right edge of the containing block.
• Bottom – which specifies how far a box’s bottom margin edge is offset above the bottom edge of the containing block.
• Left – which specifies how far a box’s left margin edge is offset to the left of the right edge of the containing block.

 Summary

In this article, we learned about managing content position in your HTML5 web pages. I hope you have found this information useful.

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com

References

• http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning
• http://www.w3schools.com/css/css_positioning.asp
• http://css-tricks.com/css-content/
• http://www.bing.com/search?setmkt=en-US&q=CSS+content+position