Tag Archives: absolute positioning

Absolute Position (CSS)

What is “position:absolute” in CSS ? To learn absolute positioning CSS property you must understand block level & inline elements, normal flow concept of CSS. You must know normal flow first, then learn absolute position concept.


Box model, Normal Flow > Absolute positioning


Absolute Positioning Explained

  1. An absolutely positioned element is removed from the normal flow. This positioning scheme applies to any element that has its position porperty absolute or fixed.
  2. This means you can put it anywhere, and it won’t affect or be affected by any other element in the flow.
  3. Normally absolutely positioned elements are positioned by the top and left property assigned to them.
  4. This top and left works with respect to the container block of this absolutely positioned element. This top and left are called offset positions.
  5. Absolute positioning always works w.r.t the container block of this absolutely positioned element.
  6. Absolute elements create a new coordinate system for child elements inside them.
  7. This is an exellent property of ABSOLUTE POSITIONING : Use all four offset properties (TOP, LEFT, BOTTOM, RIGHT), and you can stretch an element without defining any width or height—it’s bound only by its parent element or the document itself if there is no container.

Continue reading Absolute Position (CSS)

Absolute positioned DIV, inside relative container

Mixing relative positioning and absolute positioning together

How to apply absolute positioning inside relative positioning container element explained in this example. Here the container is a DIV block with relative positioning and an absolutely positioned element (it is also a DIV block) will be placed inside this container DIV.

In this example we have placed a container DIV with Gray background which is relatively positioned and a pink DIV which is actually a child div inside contained div.

Continue reading Absolute positioned DIV, inside relative container