web-dev-qa-db-fra.com

Flottant div sur une image

J'ai du mal à faire passer une div sur une image. Voici ce que j'essaie d'accomplir: 

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

Dans cette image:

enter image description here

Je souhaite que la zone "Sélectionné" flotte au-dessus de l'image, mais elle semble plutôt "effacer" le flotteur et entraîner le retour à l'image de la ligne suivante, comme si elle était affichée comme un élément de bloc. Malheureusement, je ne peux pas comprendre ce que je fais mal. Des idées?

htmlcsscss-floatz-index
40
Jeremy Harris

N'échoue jamais, une fois que j'ai posté la question à SO, j'ai un moment "aha" éclairant et je l'ai compris. La solution:

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

La clé est que le conteneur doit être positionné relatif et l'étiquette positionnée absolu .

77
Jeremy Harris

Changez un peu votre positionnement:

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

Exemple jsFiddle

Vous devez définir le positionnement relatif sur le conteneur, puis absolu sur la balise interne div. Le positionnement absolu de l'étiquette interne sera par rapport à la division externe relativement positionnée. Vous n'avez même pas besoin de la règle z-index sur la balise div.

17
j08691

En fait, il suffit d’ajouter margin-bottom: -20px; à la classe tag l'a corrigé.

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

En tant qu'éléments de bloc, les div ont naturellement défini des frontières qu'ils ne veulent pas violer. Pour les amener à superposer des images qui n'ont pas de contenu à côté de l'image car elles n'ont pas de balise de fermeture, il suffit de les forcer à faire ce qu'elles ne veulent pas, comme enfreindre leurs limites naturelles.

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

Une autre solution consiste à créer des div en utilisant une image comme arrière-plan, puis à placer le contenu où bon vous semble.

<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

Vous avez la bonne idée. Il me semble que vous devez simplement changer .tagposition:relative en position:absolute et ajouter position:relative à .container.

2
user1618143

vous pourriez envisager d’utiliser le positining relatif et absolu. 

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

Je l'ai testé là-bas, même si vous voulez qu'il change de position, utilisez ceci comme marge: 

top: 20px;
left: 10px; 

Il le placera à 20 pixels du haut et 10 pixels de la gauche; mais laissez celui-ci sinon nécessaire.

0
user2690583