html - titulo - Div flotante sobre una imagen

superponer texto a imagen css

Question

Tengo problemas para colocar un div en una imagen. Aquí hay un violín de lo que estoy tratando de lograr: 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;
}

En esta imagen:

Quiero que el cuadro "Destacado" flote sobre la parte superior de la imagen, pero parece que "limpia" el flotador y hace que la imagen se ajuste a la línea siguiente, como si se mostrara como un elemento de bloque. Lamentablemente, no puedo entender lo que estoy haciendo mal. ¿Algunas ideas?

Answer 1

Cambie su posicionamiento un poco:

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

Ejemplo jsFiddle

Debe establecer el posicionamiento relativo en el contenedor y luego absoluto en la etiqueta interna div. El posicionamiento absoluto de la etiqueta interna será con respecto al div externo relativamente posicionado. Ni siquiera necesita la regla z-index en la etiqueta div.

Answer 2

En realidad, simplemente agregando margen abajo: -20px; a la clase de etiqueta lo arregló bien.

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

Al ser elementos de bloque, los div tienen fronteras definidas que intentan no violar. Para hacer que formen capas para las imágenes, que no tienen contenido al lado de la imagen porque no tienen etiqueta de cierre, solo tienes que obligarlas a hacer lo que no quieren, como violar sus límites naturales.

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

Otro tema a tomar sería crear div usando una imagen como fondo, y luego colocar el contenido donde lo desee.

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

Answer 3

Nunca falla, una vez que publico la pregunta en SO, obtengo un momento esclarecedor de "ajá" y lo resuelvo. La solución:

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 clave es que el contenedor debe posicionarse de forma relativa y la etiqueta posicionada de forma absoluta .

Answer 4

Tienes la idea correcta. Me parece que solo necesitas cambiar la position:relative .tag position:relative a la position:absolute , y agregar position:relative a .container .

Answer 5

podrías considerar usar la positividad relativa y absoluta.

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

Lo he probado allí, también si quieres que cambie su posición usa esto como su margen:

top: 20px;  left: 10px;

Lo colocará a 20 píxeles de la parte superior y 10 píxeles de la izquierda; pero deja esto si no es necesario.