Div Floating su un'immagine

Question

Ho problemi a flottare un div su un'immagine. Ecco un violino di quello che sto cercando di realizzare: http://jsfiddle.net/dChUR/

HTML:

<div class="container"> 
    <div class="tag">Featured</div> 
    <img src="http://www.placehold.it/200x200"> 
</div> 

CSS:

.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; 
} 

In questa immagine:

Voglio che la casella "In primo piano" galleggi sopra l'immagine ma invece sembra "cancellare" il float e fa sì che l'immagine si sposti alla riga successiva, come se fosse visualizzata come un elemento di blocco. Sfortunatamente, non riesco a capire cosa sto facendo male. Qualche idea?

Answer 1

Non manca mai, una volta che invio la domanda a SO, ottengo qualche illuminante momento "aha" e capisco. La soluzione:

HTML:

<div class="container"> 
    <div class="tag">Featured</div> 
    <img src="http://www.placehold.it/200x200"> 
</div> 

CSS:

.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; 
} 

La chiave è il contenitore deve essere posizionato relativa e il tag posizionato assoluta.

Answer 2

Cambia il vostro posizionamento un po ':

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

jsFiddle example

È necessario impostare il posizionamento relativo sul contenitore e quindi assoluta sul tag div interno. Il posizionamento assoluto del tag interno sarà rispetto al div esterno relativamente posizionato. Non hai nemmeno bisogno della regola z-index sul tag div.

Answer 3

Hai l'idea giusta. Mi sembra che tu abbia solo bisogno di cambiare position:relative a position:absolute e aggiungere position:relative a .container.

Answer 4

si potrebbe considerare l'utilizzo della positività relativa e assoluta.

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

ho provato lì, anche se si vuole cambiare la sua posizione utilizzare questo come il suo margine:

top: 20px;
left: 10px;

posizionarlo 20 pixel dall'alto e dal 10 pixel da sinistra ; ma lascia questo se non è necessario.

Answer 5

In realtà solo aggiungendo margin-bottom: -20px; alla classe del tag lo ha risolto correttamente.

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

elementi di blocco Essere, bordi naturalmente hanno definito del div che cercano di non violare. Per fare in modo che facciano lo strato per le immagini, che non hanno alcun contenuto accanto all'immagine perché non hanno tag di chiusura, devi semplicemente costringerli a fare ciò che non vogliono fare, come violare i loro confini naturali.

.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; 
    } 

Un'altra toue di prendere sarebbe quello di creare div sta usando un'immagine come sfondo, e quindi inserire contenuti in cui mai ti piace.

<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>