webentwicklung-frage-antwort-db.com.de

Schwimmende Div über einem Bild

Ich habe Probleme, ein Div über ein Bild zu ziehen. Folgendes versuche ich zu erreichen: 

    .container {
       border: 1px solid #DDDDDD;
       width: 200px;
       height: 200px;
    }
    .tag {
       float: left;
       position: relative;
       left: 0px;
       top: 0px;
       z-index: 1000;
       background-color: #92AD40;
       padding: 5px;
       color: #FFFFFF;
       font-weight: bold;
    }
    <div class="container">
       <div class="tag">Featured</div>
       <img src="http://www.placehold.it/200x200">
    </div>

In diesem Bild:

enter image description here

Ich möchte, dass das Feld "Featured" über das Bild schwebt, aber stattdessen scheint es den Float zu "löschen" und das Bild in die nächste Zeile zu springen, als würde es als Blockelement angezeigt. Leider kann ich nicht herausfinden, was ich falsch mache. Irgendwelche Ideen?

40
Jeremy Harris

Versagt nie, sobald ich die Frage an SO gestellt habe, bekomme ich einen erleuchtenden "Aha" -Moment und finde es heraus. Die Lösung:

    .container {
       border: 1px solid #DDDDDD;
       width: 200px;
       height: 200px;
       position: relative;
    }
    .tag {
       float: left;
       position: absolute;
       left: 0px;
       top: 0px;
       z-index: 1000;
       background-color: #92AD40;
       padding: 5px;
       color: #FFFFFF;
       font-weight: bold;
    }
<div class="container">
       <div class="tag">Featured</div>
       <img src="http://www.placehold.it/200x200">
</div>

Der Schlüssel ist, dass der Container relativ und der Tag absolut positioniert werden muss.

77
Jeremy Harris

Ändern Sie Ihre Positionierung etwas:

.container {
    border: 1px solid #DDDDDD;
    width: 200px;
    height: 200px;
    position:relative;
}
.tag {
    float: left;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: green;
}

jsFiddle-Beispiel

Sie müssen die relative Position des Containers und dann die absolute Position des inneren Tags div festlegen. Die absolute Positionierung des inneren Tags bezieht sich auf das äußere relativ positionierte div. Sie benötigen nicht einmal die Z-Index-Regel für das Tag div.

17
j08691

Eigentlich nur Rand hinzufügen: -20px; zu der Tag-Klasse wurde es richtig behoben.

http://jsfiddle.net/dChUR/7/

Als Blockelemente haben divs natürlich Grenzen definiert, die sie nicht zu verletzen versuchen. Um sie dazu zu bringen, nach Bildern zu schichten, die keinen Inhalt neben dem Bild haben, weil sie kein schließendes Tag haben, müssen Sie sie nur dazu zwingen, das zu tun, was sie nicht tun möchten, z.

.container {
  border: 1px solid #DDDDDD;
  width: 200px;
  height: 200px;
  }
.tag {
  float: left;
  position: relative;
  left: 0px;
  top: 0px;
  background-color: green;
  z-index: 1000;
  margin-bottom: -20px;
  }

Eine weitere Aufgabe wäre, Divs zu erstellen, die ein Bild als Hintergrund verwenden und den Inhalt dann an beliebiger Stelle platzieren.

<div id="imgContainer" style="
         background-image: url("foo.jpg"); 
         background-repeat: no-repeat; 
         background-size: cover; 
         -webkit-background-size: cover; 
         -mox-background-size: cover; 
         -o-background-size: cover;">
  <div id="theTag">BLAH BLAH BLAH</div>
</div>
6
Thomas Cheney

Du hast die richtige Idee. Sieht aus, als müssten Sie nur .tagposition:relative in position:absolute ändern und position:relative zu .container hinzufügen.

2
user1618143

sie können die Relative und Absolute Positining verwenden. 

`.container {  
position: relative;  
}  
.tag {     
position: absolute;   
}`  

Ich habe es dort getestet, auch wenn Sie möchten, dass es seine Position ändert, verwenden Sie dies als Rand 

top: 20px;
left: 10px;
 

Es wird 20 Pixel von oben und 10 Pixel von links platziert. aber lassen Sie diese, wenn nicht notwendig.

0
user2690583