difference in box-shadow when using position relative

Question

I'm little surprised with the behavior of box-shadow that if the container is positioned relatively the shadow goes to below but if it isn't positioned (i.e. static position) the shadow appears to front.

#main{
  position: relative; /*sets shadow to below the heading*/
}

Unsetting relative position sets the shadow to front of the heading:

#main{
  /*position: relative; */
}

demo

Can anyone tell me about this change?

Answer 1

position: relative should not have an effect there in normal circumstances, because the element with the shadow appears later in the source anyway.

The real problem here, which is not mentioned in the question, is the fact that you're working with display: table-* elements. Firefox is known to behave differently from other browsers when using position: relative on internal table boxes because there is no defined behavior in such a situation. From the spec:

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

If your layout relies on stacking contexts to work, such as when you're using box shadows, I advise against using display: table.