Why does absolute positioned element is displayed over a static one?

Question

I know absolute positioning breaks normal flow but since the order in HTML is absolute element first then static one, I was expecting it to be reflected in the display order too.

.absolute
{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: black;
}

.static
{
  background-color: red;
  height: 20px;
  width: 400px;
}

<div>
  <div class="absolute"></div>
  <div class="static"></div>
</div>

The reason I need this is because I want to display a sliding menu (the '.absolute' div) which slides from bottom to up and appears like it's coming from the back of the '.static' div. The container div will obviously need to have 'overflow: visible'.

Any idea how to accomplish this?

Maybe another technique is needed? Like CSS clip?

Answer 1

As per section 9.9.1 Specifying the stack level: the 'z-index' property of CSS 2.2:

Within each stacking context, the following layers are painted in back-to-front order:

• the background and borders of the element forming the stacking context.
• the child stacking contexts with negative stack levels (most negative first).
• the in-flow, non-inline-level, non-positioned descendants.
• the non-positioned floats.
• the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
• the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
• the child stacking contexts with positive stack levels (least positive first).

Third one in list is position:static and 6-th is position:absolute. I marked them for you.

---

Edit, based on your question edits:

In order to fix your issue (which is what you should have asked in the first place, IMHO) you need to

• apply position:relative; to your .static div, bringing it to the same level with the position:absolute one. (Now the'll both be positioned).
• If the one you want on top is not the last in DOM, you also need to give it a positive z-index, bigger than it's siblings'. Normally they are rendered back-to-top.

Answer 2

Both the answers above give the adequate explanation to the situation you are facing. Given the problem at hand you can use this solution. Just add position:relative to the static div.

.absolute
{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: black;
}

.static
{
  background-color: red;
  height: 20px;
  width: 400px;
  position: relative;
}

<div>
  <div class="absolute"></div>
  <div class="static"></div>
</div>