Poszukuję rozwiązania do umieszczenia elementu div (100% szerokości ekranu i powiedzmy, że wysokość 20%) na górze elementu iframe, który ma 100% szerokości ekranu i 100% wysokości ekranu Powinno to wyglądać tak :div na wierzchu iframe
__________________________
|| On top DIV ||
||_______________________||
| |
| Iframe |
| |
|_________________________|
Super proste rzeczy ..
umieścić iframe i div div nagłówka wewnątrz jednego kontenera.
pozycja zestawu: względny na kontenerze, a pozycja: bezwzględny i na górze: 0 w div nagłówka.
który powinien to zrobić.
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;
}
Twój przykład i jsFiddle są zepsute, element div class = bar powinien znajdować się powyżej elementu iframe, a nie pod nim. Próbowałem tego na własną rękę i zadziwiająco działa, nawet gdy element iframe ma zewnętrzne źródło. Wiedziałem, że to powinno działać technicznie, ale myślałem, że może to być ogromny problem bezpieczeństwa. – Derek
@Derek - .bar jest ustawiony absolutnie, dlatego nie ma znaczenia, kto poprzedza, kto w znaczniku, jako .bar zawsze pojawi się powyżej, chyba że z-indexed inaczej. – Rodik
@Rodik Cóż, to nie działa jak masz obecnie. – Tim
Powinno być możliwe, w czym problem?
Upewnij się, że masz ustawiony styl position na absolute (lub fixed, w zależności od potrzeb) i w razie potrzeby ustaw prawidłową z-index. W razie potrzeby dostosuj także width i height.
Koncepcja Rodik odpowiedź jest dobra, ale realizacja jest wadliwy.
umieścić iframe i div div nagłówka wewnątrz jednego kontenera.
pozycja zestawu: względny na kontenerze, a pozycja: bezwzględny i górny: 0 w div nagłówka.
W HTML kod
<div class="holder">
<iframe class="frame"></iframe>
<div class="bar"></div>
</div>
W 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;
}
Dzięki, działa dla mnie – dgiaig
przypuszczam, ale dlaczego nie umieścić div się szczyt z stylu 'style =" position : naprawiony; szerokość: 100%; wysokość: 200 pikseli; lewo: 0 pikseli; góra: 0 pikseli; " i umieść element iframe tuż pod nim o szerokości 100% i wysokości 100% - 200 pikseli ...? – Zak