Saltar al contenido

Div flotante sobre una imagen

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.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *