Iframe and Conflicting Absolute Positions

why can't you use iframe absolute positioning to set height/width

Iframes are "replaced elements".

These are treated differently than non-replaced elements. Without going into the details, just look at the spec's table of contents: http://www.w3.org/TR/CSS21/visudet.html

10.3 Calculating widths and margins

10.3.1 Inline, non-replaced elements

10.3.2 Inline, replaced elements

10.3.3 Block-level, non-replaced elements in normal flow

10.3.4 Block-level, replaced elements in normal flow

10.3.5 Floating, non-replaced elements

10.3.6 Floating, replaced elements

10.3.7 Absolutely positioned, non-replaced elements // div

10.3.8 Absolutely positioned, replaced elements // iframe

10.3.9 'Inline-block', non-replaced elements in normal flow

10.3.10 'Inline-block', replaced elements in normal flow

Absolute Positioning Issue

You can enclose second div in position:relative container. This way, top:0px will be counted from that div and not the whole window:

http://jsfiddle.net/z9KbD/

Explanation is in definition of position:absolute: Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static.

Chrome gap below iframe inside absolute div with border

Am not sure why Chrome behaves awkwardly... But if anyone's interested in workaround, than you can use calc()

Demo

html, body {
    height: 100%;
}

* {
    margin: 0px;
    padding: 0px;

    /* Make box sizes include the border, which is more convenient in most cases */
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

div {
    border-style: solid;
    border-width: 10px;
    top: 50px;
    position: absolute;
}

iframe {
    display: block;
    width: 100%;
    height: 100%;    
    border-style: dashed;
}

#frame_container {
    width: 100px;
    height: 100%;
    height: calc(100% - 50px);
}

Chrome not displaying iframe and/or transition properly

I believe some of the problems you are having are due to mixing display: block; and display: inline-block; for the same element.

Removing the float property from .rect, and the display property from .open results in the following, which seems to be working as intended with no other changes.

.rect{
    height: 0px;
    width: 100%;
    display: block;
    margin: 0px;
    padding: 0px;
    opacity: 0;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 11.4vw;
    width: 100%;
    opacity: 1;
}

div on top of iframe

Super simple stuff..

put an iframe, and a header div inside one container div.

set position:relative on the container, and position:absolute and top:0 on the header div.

that should do it.

HTML:

<div class="holder">
   <div class="bar"></div>
   <iframe class="frame"></iframe>
</div>​

CSS:

.holder{
    width: 400px;
    height: 300px;
    position: relative;
}

.frame{
    width: 100%;
    height: 100%;
}

.bar{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
}

fiddle

Div over iframe and white border on internet explorer

In IE, and plug-ins are window elements. It's impossible to render anything in front of an window element but other window elements.

Solution: Put div.front into an iframe as well, order with z-index.

More information

---

Related Topics