Pływający znak Div ​​na obrazku

Question

Mam problem z unoszeniem elementu div nad obrazem. Oto skrzypce, co usiłuję osiągnąć: 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; 
} 

W tym obrazie:

Chcę, aby pole "Polecane" było unoszone nad obrazem, ale zamiast tego wydaje się "usuwać" zmienną i powodować, że obraz zawija się do następnej linii, tak jakby był wyświetlany jako element blokowy. Niestety, nie mogę zrozumieć, co robię źle. Jakieś pomysły?

Answer 1

Nigdy nie zawodzi, po tym jak zamieściłem pytanie na SO, dostaję oświecający moment "aha" i zrozumiem. Rozwiązanie:

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

Kluczem jest pojemnik musi być umieszczony względna a znacznik umieszczony absolutną.

Answer 2

Zmień swoją pozycjonowanie trochę:

.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

Musisz ustawić względną pozycję na pojemniku, a następnie bezwzględne na wewnętrznej div znacznika. Położenie bezwzględne wewnętrznego znacznika będzie się odnosić do zewnętrznego, względnie usytuowanego elementu div. Nie potrzebujesz nawet reguły z-index w tag div.

Answer 3

Masz dobry pomysł. Wygląda na to, że wystarczy zmienić .tag na position:relative na position:absolute i dodać position:relative do .container.

Answer 4

możesz rozważyć użycie pozycji względnej i bezwzględnej.

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

Ja testowałem go tam, także jeśli chcesz zmienić jego położenie to wykorzystać jako margin:

top: 20px;
left: 10px;

Będzie to 20 pikseli od góry i 10 pikseli od lewej miejsce ; ale zostaw tę, jeśli nie jest to konieczne.

Answer 5

Właściwie po prostu dodając margines-dół: -20px; do klasy znaczników poprawiono ją.

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

Będąc elementy blokowe, naturalnie mają określone granice DIV, że nie próbują one naruszać. Aby utworzyć warstwę dla obrazów, które nie mają zawartości obok obrazu, ponieważ nie mają tagów zamykających, wystarczy zmusić ich do zrobienia tego, czego nie chcą robić, na przykład naruszania ich naturalnych granic.

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

Innym sposobem na zrobienie jest stworzenie elementu div za pomocą obrazu jako tła, a następnie umieszczenie zawartości tam, gdzie chcesz.

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