Comunidad de diseño web y desarrollo en internet online

Un div sobre otro div

Citar            
MensajeEscrito el 06 May 2008 08:08 am
Hola a todos. El problema con el que me encuentro hoy es el siguiente:

Tengo unas cajas con bordes redondeados creadas con varios div para mostrar un producto en cada caja. Quisiera que sobre esquina superior derecha apareciera "oferta" (es una imagen).

Pense que se podía con position:absolute y z-index:1

¿Es posible realizar esta operación?

Por xilitos

53 de clabLevel



Genero:Masculino  

Vigo / Galicia

opera
Citar            
MensajeEscrito el 06 May 2008 08:38 am
El "z-index" crece hacia arriba, no hacia abajo; es decir, que el "10", tapa al "1"; el "20" al "10", y así sucesivamente.
Por lo demás, te diría que en lugar de una imagen, pongas "oferta" con texto.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 06 May 2008 08:47 am
Es una imagen porque el jefe me ha pedido que vaya dentro de una forma de estrella para destacar más.

Para que funcione es necesario especificar al resto z-index:0 ?

Por xilitos

53 de clabLevel



Genero:Masculino  

Vigo / Galicia

opera
Citar            
MensajeEscrito el 06 May 2008 12:28 pm

xilitos escribió:

Es una imagen porque el jefe me ha pedido que vaya dentro de una forma de estrella para destacar más.
Para eso, ponle, mediante CSS, un "background" al enlace. El background puede ser una "estrella", una luna, un sol... o lo que él quiera. A la vez, ganarás en accesibilidad y rapidez en la carga del contenido, que es lo que importa.

xilitos escribió:

Para que funcione es necesario especificar al resto z-index:0 ?
No.
Los z-index que especifiques explícitamente, tienen pregnancia sobre los no especificados.
Aún así, he visto que se ponen valores altos, para "no pillarse los dedos".
z-index:2000

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 07 May 2008 07:08 am
Gracias Rizome :)

Por xilitos

53 de clabLevel



Genero:Masculino  

Vigo / Galicia

opera
Citar            
MensajeEscrito el 08 May 2008 11:40 am
Ahora me surge otro problema, y es que me han pedido que mejor vaya en otro sitio. En el cual si pongo el div pues me crea un espacio que mueve el resto de elementos.

Probando he visto que con position absolute no te mueve los elementos, pero claro con absolute no me vale porque no siempre estará en el mismo sito.

¿Hay alguna solución a esto?

Por xilitos

53 de clabLevel



Genero:Masculino  

Vigo / Galicia

opera
Citar            
MensajeEscrito el 08 May 2008 11:42 am
Por cierto ya he visto el post que está más abajo pero no me acabo de aclarar.

PDT: ¿en este foro no se puede editar no?

Por xilitos

53 de clabLevel



Genero:Masculino  

Vigo / Galicia

opera
Citar            
MensajeEscrito el 08 May 2008 12:59 pm
Con "position:absolute", no tiene porqué estar en el mismo sitio.
Es decir, que si pones el <div> "position:absolute", anidado dentro de otro <div> "position:relative", la posición la tomará desde la esquina superior-izquierda de su padre, y no del <body>
Ejemplo:

Código :

<body>
<div style="position:relative;top:20px;left:20px;">
   <div style="position:absolute;top:10px;left:15px;">
    <!-- este div, no está a (10,15) del body, sino a (10,15) de su padre, y en este caso, a (30,35) del body //-->
   </div>
</div>
<body>

Haz la prueba, y verás.
;)

PD:
No. En estos foros, no se puede editar.
:(

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 08 May 2008 01:31 pm
Muchas gracias rizome.

Lo he arreglado como has dicho. Poniéndole relative a la caja contenedora y absolute a la imagen en cuestión.

Estás en todo

Por xilitos

53 de clabLevel



Genero:Masculino  

Vigo / Galicia

opera
Citar            
MensajeEscrito el 08 May 2008 01:37 pm
^^
Me alegro de haberte sido de ayuda.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.