Ich bin auf der Suche nach einer Lösung, um ein div (100% Bildschirmbreite und sagen wir 20% Höhe) oben auf iframe, die 100% Bildschirmbreite und 100% Bildschirmhöhe ist Es sollte so aussehen :div oben auf iframe
__________________________
|| On top DIV ||
||_______________________||
| |
| Iframe |
| |
|_________________________|
Super einfach Sachen ..
legte einen iframe, und einen Header div innerhalb eines div-Container.
eingestellte Position: relativ zum Container und Position: absolut und oben: 0 im Header Div.
, die es tun sollte.
HTML:
<div class="holder">
<iframe class="frame"></iframe>
<div class="bar"></div>
</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;
}
Ihr Beispiel und jsFiddle sind gebrochen, das Element div class = bar sollte über dem iframe und nicht darunter liegen. Ich habe das selbst ausprobiert und es funktioniert überraschend, selbst wenn der Iframe eine externe Quelle hat. Ich wusste, dass es technisch funktionieren sollte, dachte aber, dass es ein großes Sicherheitsproblem sein könnte. – Derek
@Derek - die .bar ist absolut positioniert, daher spielt es keine Rolle, wer wem im Markup vorangeht, da die .bar immer oben angezeigt wird, es sei denn, es wird anders z-indexiert. – Rodik
@Rodik Nun, es funktioniert nicht, wie Sie es derzeit haben. – Tim
Es sollte möglich sein, was ist das Problem?
Vergewissern Sie sich, den position Stil Set absolute (oder fixed, auf die je nach Bedarf) und stellen Sie die richtigen z-index, falls erforderlich. Passen Sie auch width und height nach Bedarf an.
Das Konzept der Rodik Antwort ist gut, aber die Umsetzung ist fehlerhaft.
legte einen iframe, und einen Header div innerhalb eines div-Container.
eingestellte Position: relativ zum Container und Position: absolut und oben: 0 im Header Div.
In HTML-Code
<div class="holder">
<iframe class="frame"></iframe>
<div class="bar"></div>
</div>
In CSS
.holder{
width: 400px;
height:300px;
position:relative
}
.frame{
width: 100%;
height:100%;
background-color:blue;
}
.bar{
position:absolute;
top:0;
left:0;
width:100%;
height:40px;
background-color: red;
}
Danke, es funktioniert für mich – dgiaig
Ich nehme an, aber warum nicht die div legt bis oben mit einem Stil von 'style =" position : fest; Breite: 100%; Höhe: 200px; links: 0px; oben: 0px; " und platziere den Iframe knapp darunter mit einer Breite von 100% und einer Höhe von 100% - 200 px ... ?? – Zak