Sean Cobb Sean Cobb - 5 months ago 9
HTML Question

Div disappears when absolute positioned, parent dynamic height

The title says it all really.

div disappears after position: relative

I've checked this answer out, but it doesn't seem to suit what I'm after. And the problem with the OP in here, seems to be that he had no height in its parent DIV. Mine has, the only thing is that it's dynamically generated via jQuery. Could that be the problem?

Here's the jsbin:

http://output.jsbin.com/widipat

I've commented out the position attribute.

Answer

#banner (your orange banner) has no content inside it, so when it is absolutely positioned you must give it a width and height in order for it to appear on the page. Otherwise, it will size to 0px by 0px and will not be visible.

For example:

#banner {
    background-color: #f98939;
    height: 40px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
Comments