CSS sichtbar machen div trotz Überlauf versteckt

Ich habe Taste auf meiner Website in einem Container wie mein Beispiel hier: https://jsfiddle.net/j8z7hbc3/3/CSS sichtbar machen div trotz Überlauf versteckt

Nun, wenn ich auf die Schaltfläche klicken, wird wegen der Überlauf: die Menge versteckt ist nicht vollständig sichtbar
Gibt es eine Möglichkeit, es zu beheben?

<div class="container"> 

    <div class="video-wrapper-absolute"> 
     <div class="video-wrapper"> 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/C2VjWtMbrzQ?version=3&loop=1&playlist=C2VjWtMbrzQ&autoplay=1&showinfo=0&vq1080" frameborder="0" allowfullscreen></iframe> 
     </div> 
    </div> 

    <div class="coupon"> 
     <div class="button">GET COUPON</div> 
     <div class="amount" style="display:none;">25% OFF</div> 
    </div> 

</div>

CSS:

.container { position:relative; width:100%; height:200px; overflow:hidden; }  

.video-wrapper-absolute { position:absolute; top:0; left:0; right:0; bottom:0; } 
.video-wrapper { position:relative; padding-bottom:56.25%; height:0; } 
.video-wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; } 

#ytplayer { width:100%; height:100%; } 

.coupon { background:orange; margin-top:158px; float:left; position:relative; } 
.button { padding:6px; text-align:center; font-weight:bold; cursor:pointer; } 
.amount { background:purple; color:#fff; padding:6px; text-align:center; }

clearfix mit nicht für mich in diesem Fall arbeiten

Quelle

2016-09-03 Energ

Mögliche Duplikat [Make Kind sichtbar außerhalb eines overflow: hidden parent] (http://stackoverflow.com/questions/3387489/make-child-visible-outside-an- overflowhidden-parent) –

Ich habe das schon gesehen, ich habe diesen Code ausprobiert, aber in diesem Fall funktioniert der Clearfix nicht – Energ

Sie könnten es sichtbar machen, wie in diesem Beispiel zu sehen: https://jsfiddle.net/aukgf9qs/

Meine Änderungen In deinem CSS verschiebst du alle Containerklassenstile auf .video-wrapper-absolute, da ich denke, dass du nur den Überlauf deines Videos verstecken willst. Zusätzlich habe ich die Buttons position: absolute; gesetzt und den margin-top auf einen nur top Wert geändert, da jetzt absolute Positionierung verwendet wird.

Voll CSS:

.video-wrapper-absolute { position:absolute; top:0; left:0; right:0; bottom:0;position:relative; width:100%; height:200px; overflow:hidden; } 
.video-wrapper { position:relative; padding-bottom:56.25%; height:0; } 
.video-wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; } 

#ytplayer { width:100%; height:100%; z-index:-1; } 

.coupon { background:orange; top:158px; float:left; position:absolute; } 
.button { padding:6px; text-align:center; font-weight:bold; cursor:pointer; } 
.amount { background:purple; color:#fff; padding:6px; text-align:center; }

Quelle

2016-09-03 01:21:32

aber wenn ich Inhalt in den Container lege ist es nicht auf dem Video, es ist darüber – Energ

Sie können auch verwende dafür auch absolute Positionierung, leider weiß ich nicht, wo du deine Inhalte hinzugefügt hast, daher hier nur ein kleines Beispiel: https://jsfiddle.net/aukgf9qs/3/ Du kannst auch einen Container erstellen, der dein Video überlagert fügen Sie Ihre Inhalt dann, dies verhindert das Umschreiben aller für jedes neue HTML-Tag, das Sie verwenden. –

ja, aber dann wäre es nicht responsive oder einfach keine gute Idee, mit dem Inhalt zu beginnen, um absolut zu sein, weil ich mehr als nur eine Zeile habe, im Grunde möchte ich nur ein Video im Hintergrund eines div sein – Energ

CSS sichtbar machen div trotz Überlauf versteckt

Antwort

Verwandte Themen