Last Updated
Viewed 24 Times
     

consider the following simple code:

body {
  background-color: #990e82;
}

#header {
  background-color: #579900;
  position: absolute;
}

#inside {
  position: absolute;
  top: 0;
  left: 0;
}
<body>
  <div id="header">
    <div id="inside">hjhkjh</div>
  </div>
</body>

As it is possible to see in the attached snippet of the result, the outer div element's bg-color is not represented in the resulting page. Rather, the only color seen is the body's bg-color. I know the default height of block elements is determined by its content, and therefore it would seem that although the inner div element has text content, the inner div (being absolutely positioned) isn't actually considered part of the outer div element - a.k.a, the outer div has no content.
This surprises me, as the outer element is also positioned absolutely. As far as I know, this would make the outer div the containing block for the inner div for all intents and purposes (as defined in the spec - 10.1.4), and therefore "supply" the inner content to the outer div and stretch it. This would ostensibly result in the outer div's bg-color to show.
I would love for a clarification regarding the relationship between containing blocks, and the actual content contained in said blocks.

"The absolutely positioned element is positioned relative to nearest positioned ancestor." -MDN: position - CSS

I understood this when there was a parent who was defined as position:relative; but what I didn't realize was that position:absolute technically qualified as a "positioned ancestor".

Here is a sample: http://jsfiddle.net/MSzZG/ It would be nice if the text "At top" could have the top property apply to the window instead of the containing div but I just cannot figure out if it is possible to bypass.

<div>
 <div>Content
 </div>
</div>
<div style="position:absolute;">
 <div style="position:absolute;top:0px;">At top
 </div>
</div>

Is there any way to bypass a previously positioned absolute element (without using fixed)? A javascript solution is acceptable.

I have a bunch of html that is absolutely positioned and then html snippet that is supposed to show after that. But they over lap.

http://jsbin.com/okamot/1/edit

Everything under .drag-drop is supposed to be absolutely placed so the height and width of .drag-drop become zero. The exhibit button and the exhibit text are supposed to show after the bolded This is Drag and Drop Item. But because the height of .drag-drop is zero it shows right over the contents of .drag-drop`.

I have had this issue before, but fortunately it was easy to calculate the height of the children of .drag-drop and then I would set the height of the .drag-drop to be that using javascript. This time it is harder as it contains more children and they are not constant. How would I change my css so that the Exhibit shows below the drag drop ?

Consider the following code:

<html>
<head></head>
<body>
    <div id="A">
        <div id="B" style="left: 0; position: absolute; top: 0;">... STUFF ...</div>
    </div>
</body>
</html>

A turns out to have a height of 0, regardless of the size of B and its contents. I want A to have its height set appropriately according to what's inside B.

Is this possible to achieve with CSS ?

So far, I haven't found any way to do it, but I'm pretty sure CSS should be capable of handling this, it looks like an extremely trivial to do.

I know there are many posts about achieving clearfix, but they appear to be outdated. It's 2016 now, maybe there are new alternatives available.

Important stuff: This is what I want to achieve, I didn't write that little layout and those style properties by chance. Please refrain from suggesting alternatives where the layout is different form the one I presented.

Similar Question 4 (3 solutions) : Extend height to include absolutely positioned children

cc