Question: I am playing with following HTML/CSS to understand "absolute" in CSS:

<http://jsfiddle.net/x0rp29kx/9/>

Here is the relevant part:

```
.concentric-rectangle {
    display: block;
    //position: absolute;
    top: 50%;
    display: inline-block;
    width: 150px;
    height: 150px;
}

```

When "position: absolute" is commented, it shows two rows correctly, as expected. However, when it is uncommented, it combines both into one row. Why?

I experimented by adding "myrow" class to that is parent to all columns(col-md-3) and declaring its position to relative. I expected that after doing so if I uncomment "position: absolute" then the rendering of the two rows would not overlap. However, it still does.

What is causing them to overlap?

EDIT: I see this <http://i.imgur.com/N9PNj4B.png> when myrow is relative and CR is absolute vs. this <http://i.imgur.com/ljfKKX5.png> when both are static. Any idea?

Answer: 
The theory
==========

`position: absolute` actually positions the element relative (haha) to the innermost element that isn't `position: static` (which is the default).

Usually, you use an ancestor somewhere that has `position: relative` with nothing that changes its position (so no `top`, `bottom`, `left` or `right` property). This is identical to `position: static` (because this is what relative position is relative to) except that it creates the containing block for elements with absolute position.

[CSS2 §10.1 Definition of "containing block"](http://www.w3.org/TR/CSS2/visudet.html#containing-block-details)

The (awesome) [Learn CSS Layout](http://learnlayout.com/) tutorial has a chapter on [position](http://learnlayout.com/position.html).

In practice
===========

In your case, I see two rows with the following combination of positions:

```
.myrow { position: relative; }
.concentric-rectangle { position: absolute; }

```

If `.myrow` gets static positioning, then all `.concentric-rectangle` are positioned relative to the viewport, not their row.
When you position something as absolute in CSS, it basically stops taking up actual space on the page. The document will stack any elements on top of each other that have the same absolute positioning. You need the 2 absolutely positioned elements to have two different absolute positions.

Edit: to clarify, this is only true if both absolutely positioned elements have the same parent. If they have different parents then they can have the same positioning but appear on different places in the page.