Search This Blog

February 5, 2014

Positioning with CSS

The positioning of UI elements has always been a little tricky thing. If this is you, then this blog post is for you to get out of this situation (hopefully!).

This blog post explains through examples the implications of using different CSS values for the CSS property - position.

Note that this property applies to all elements. And margin is applied after the position offsets.

Also note that elements usually can be positioned using the top | bottom | left | right properties, that work differently depending on the positioning method mentioned below. And these properties will not work unless the position property is set first.

Syntax positionstaticfixed | absoluterelative

  • This position is the initial value of this property. 
  • This lets the element get laid out in a position that goes with the normal flow of the page.
  • The top, right, bottom, and left properties do not apply.
position: static
position: static
position: static

Play with code:

  • This positions the element relative to the screen's viewport.
  • The implication is that it doesn't move when the screen is scrolled.
Do you see a fixed box containing text "position:text" as a set position on the screen not moving its position even when you scroll this page. That is the effect of fixed positioning.

Play with code:

  • This positions the element relative to its closest positioned ancestor or containing block.
  • If the ancestor doesn't exist, the initial container is used.
  • This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document. In other words, when you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.
  • It won't affect how the elements before it or after it in the HTML are positioned on the Web page however it will be subject to it's parents' positioning unless you override it.
  • Absolutely positioned boxes can have margins, they do not collapse with any other margins.
  • The default width of an element that is absolutely positioned is the width of the content within it. 
position: static
position: absolute
position: static

Play with code:

  • Elements positioned relative are also considered to be in the normal flow of elements in the document.
  • This positions the element relative to its normal position in the flow.
  • It is important to note that the relative positioned elements can move or overlap with the other DOM elements, but the reserved space for the element in the normal flow remains preserved.
  • The default width of an element that is relatively positioned is 100% of the space it can fill.
position: static
position: relative
position: static

Play with code:

Every learning comes with some failure, inspiration, and references. My inspiration to learn this came from a blog post explaining how to interview a UI developer. And some of the reference I made to come up with these notes in this blog post are below: