Te traemos la respuesta a esta incógnita, al menos eso pensamos. Si tienes interrogantes puedes dejar un comentario, que con gusto te responderemos
Solución:
Nunca falla, una vez que publico la pregunta en SO, obtengo un momento esclarecedor “ajá” y lo descubro. La solución:
.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;
Featured
los key es el contenedor tiene que ser posicionado pariente y la etiqueta colocada absoluto.
Cambia un poco tu posicionamiento:
.container
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
position:relative;
.tag
float: left;
position: absolute;
left: 0px;
top: 0px;
background-color: green;
js Ejemplo de violín
Debe establecer un 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 del índice z en la etiqueta div.
En realidad, solo agrega margin-bottom: -20px; a la clase de etiqueta lo arregló de inmediato.
http://jsfiddle.net/dChUR/7/
Al ser elementos de bloque, los div naturalmente tienen bordes definidos que intentan no violar. Para que se superpongan a las imágenes, que no tienen contenido al lado de la imagen porque no tienen una etiqueta de cierre, solo tienes que obligarlos a hacer lo que no quieren hacer, 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 paso a tomar sería crear div usando una imagen como fondo y luego colocar el contenido donde quieras.
BLAH BLAH BLAH
Si tienes algún titubeo o forma de desarrollar nuestro crónica te inspiramos escribir una nota y con deseo lo observaremos.