posicionamiento absoluto de capas?

gabrielflowers · #1 (**permalink**) 07/07/2009, 15:46

hola todos, tengo un problema con el posicionamiento absoluto en capas, veran tengo un div posicionado relativamente, y dentro del div tengo un span posicionado absolutamente, hasta ahi todo va bien, pero cuando clono este codigo mismo una vez mas, es ahi q me da problema de solapamiento del div principal sobre el layer (mis spans serian mis layers), expongo el codigo para q lo prueben y me den alguna sugerencia:

Código HTML:

<div style="background:yellow;border:1px solid blue;position:relative;height:100px;">
<span style="background:blue;border:1px solid red;position:absolute;top:50px;left:50px;height:100px;width:100px;z-index:2;">hola</span>

</div>
<div style="background:yellow;border:1px solid blue;position:relative;height:100px;">
<span style="background:red;border:1px solid blue;position:absolute;top:50px;left:50px;height:100px;width:100px;z-index:2;">hola</span>

</div>hola mundo q tal, como estan

espero prueben el codigo mencionado en explorer sobre todo y entenderan mejor el problema q planteo, espero alguna sugerencia, gracias, saludos.

kseso? · #2 (**permalink**) 07/07/2009, 15:53

Para que comprendas la naturaleza del problema y las posibles soluciones para corregirlo, sería conveniente que leyeses estos dos artículos de Mikmoro:
Guía 1
Guía 2

Un saludo

gabrielflowers · #3 (**permalink**) 07/07/2009, 16:05

gracias por el aporte, pero no quiero migrar mi codigo a xhtml (todavia), sino solucionarlo en el ambito de html, espero otro aporte, gracias

tupy · #4 (**permalink**) 07/07/2009, 16:11

#diva {
background:yellow;
border:1px solid blue;
position:relative;
height:100px;
}
#diva span {
background:blue;
border:1px solid red;
position:absolute;
top:50px;
left:50px;
height:100px;
width:100px;
z-index:2;
}

#divb {
background:yellow;
border:1px solid red;
height:100px;
}
#divb span {
background:red;
border:1px solid blue;
position:absolute;
top:166px;
left:61px;
height:100px;
width:100px;
z-index:2;
}

Ese es el código CSS que he utilizado para resolver tu problema. Como ves, el segundo div, NO tiene que ser position:relative. Espero que sea de tu agrado. Aún así, para un futuro, y como comenta el compañero kseso?, es preferible que utilices XHTML+CSS, es mucho más flexible y adecuado.

Un saludo!

kseso? · #5 (**permalink**) 07/07/2009, 16:14

Pues creo que ni te has molestado en ver ni la primera guía.
Si así lo hubieses hecho, hubieses visto lo primero y encabezando dicha guía un índice muy concreto que hasta te hubiese ahorrado tener que desplazarte por el resto de contenidos. Más fácil, imposible.

Porque si no tengo entendido mal, css (las propiedades y sus valores) son exactamente iguales en xhtml y html.

Suerte en tu espera

gabrielflowers · #6 (**permalink**) 07/07/2009, 16:25

estimado tupy: gracias por tu aporte, pero tu solucion esta es forzada, veras lo que yo quiero en realidad es posicionar un layer dentro de un div (que para esto, el div contenedor tiene ser posicionado relativamente), y no solo eso, sino que quiero crear n-divs contenedores cada uno de una capa (layer) posicionada respecto a una coordenadas dentro de su div contenedor

estimado kseso: entre a ver el link q me pasaste, y segun veo es un tutorial de html, y xhtml, pero sabes ya he leido muchos tutoriales similares, mi intencion ahora no es aprender xhtml, ni mucho menos, sino que busco una respuesta especifica

haciendo mis pruebas sobre el problema mencionado pareciera q no tiene solucion al menos para explorer, pero seguire esperando aportes, saludos

tupy · #7 (**permalink**) 07/07/2009, 16:46

kseso?, podrías explicarme porque le ocurre ese solapamiento por favor? Estoy intentando solucionarlo sin hacerlo de la forma que lo había hecho, pero no encuentro la forma de que pinte el recuadro de abajo, antes de que se pinte el span de arriba...

tupy · #8 (**permalink**) 07/07/2009, 17:01

Buenas gabrielflowers,

aquí te traigo una solución un tanto más efectiva, y para nada forzada:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>ejemplo de posiciones</title>
<style type="text/css">
* {margin: 0;}
.relativa {width: 400px;
height: 200px;
margin: 0 auto;
background-color: #366;
position: relative;
color: #fff;
font-size: 20px;
;border:1px solid blue;
}
.absoluta {position: absolute;
bottom: -10%;
right: 0%;
width: 100px;
height: 100px;
background-color: red;
color: #fff;
font-size: 20px;
}

.absoluta2 {position: absolute;
bottom: 45%;
right: 35%;
width: 100px;
height: 100px;
background-color: green;
color: #fff;
font-size: 20px;
}
</style>
</head>
<body>
<div class="relativa">Caja con posición relativa
<div class="absoluta">Caja con posición absoluta dentro de la caja con posición relativa
</div>
</div>
<div class="relativa">Caja con posición relativa
<div class="absoluta2">Caja con posición absoluta dentro de la caja con posición relativa
</div>
</div>
<div class="absoluta">Caja con posición absoluta fuera de ninguna otra caja</div>

</body>
</html>

Espero que sea de tu agrado.

P.D. Nada, despues de modificarlo para que sea el mismo caso que el tuyo, veo que no consigo arreglarlo...:S Haber como queda la cosa...

kseso? · #9 (**permalink**) 07/07/2009, 17:08

Hola Tupy:
Disculpa la autocita, ya se que es costumbre muy fea:

Cita:

Para que comprendas la naturaleza del problema y las posibles soluciones para corregirlo, sería conveniente que leyeses estos dos artículos de Mikmoro:
Guía 1

Ahí tiene explicado con la maestría y dominio de css que todos le reconocemos a Mikmoro las propiedades, características y, en base a ellas, el comportamiento de los elementos en función de las diferentes "position" que se le puede asignar.

Y créeme cuando te digo que soy incapaz de explicarlo mejor y más didáctico de lo que está ahí.

Y también que no llevo nada bien cuando percibo que no hay voluntad de investigar un mínimo y aprender, sino que lo único que se busca es un pedazo código. Debe ser cosa de la edad.

Un saludo

tupy · #10 (**permalink**) 07/07/2009, 17:13

Gracias por los enlaces, tenía conocimiento de ellos pero no les había dedicado el tiempo suficiente. Aún así, despues de haber leído, sobretodo la sección de las distintas posiciones(fija,relativa,absoluta y estática), sigo sin ver cómo hacer lo que pide el amigo del post.

Posteo el código modificado de mi anterior post, donde consigo sobreponer las cajas pequeñas a las grandes, pero desconozco si es la forma correcta. Y ya te comento, que efectivamente he leído largo y tendido ese apartado:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>ejemplo de posiciones</title>
<style type="text/css">
* {margin: 0;}
.relativa {width: 400px;
height: 200px;
margin: 0 auto;
background-color: #366;
color: #fff;
font-size: 20px;
;border:1px solid blue;
}
.absoluta {position: absolute;
top: 20%;
right: 30%;
width: 100px;
height: 100px;
background-color: red;
color: #fff;
font-size: 20px;
}

.absoluta2 {position: absolute;
bottom: 55%;
right: 45%;
width: 100px;
height: 100px;
background-color: green;
color: #fff;
font-size: 20px;
}
</style>
</head>
<body>
<div class="relativa">Caja con posición relativa
<div class="absoluta">Caja con posición absoluta dentro de la caja con posición relativa
</div>
</div>
<div class="relativa">Caja con posición relativa
<div class="absoluta2">Caja con posición absoluta dentro de la caja con posición relativa
</div>
</div>

</body>
</html>

kseso? · #11 (**permalink**) 07/07/2009, 17:23

Es que yo tampoco se qué quiere hacer, porque ésto no tiene sentido ni razón de ser:

Cita:

mis spans serian mis layers

tupy · #12 (**permalink**) 07/07/2009, 17:26

Yo lo que he entendido, es que las cajas pequeñas, las quiere solapar con las grandes, pero de la forma que él ha escrito el estilo, las cajitas, al moverlas hacia abajo, dejan de verse porque las tapa la caja de abajo. Y yo he intentado solucionar eso de la forma que ves en mi anterior post.

Sería correcto este estilo?

kseso? · #13 (**permalink**) 07/07/2009, 17:33

Como te decía, Tupy, no se que pretende hacer, así que el resto son conjeturas y adivinanzas.
Y alabo tus intenciones, en serio, pero esta noche yo no me toca ser el adivino

Un saludo

gabrielflowers · #14 (**permalink**) 08/07/2009, 06:52

estimado tupy muchas gracias por tu interes, y veo q solo tu entendiste el problema,

para el señor ksesos, veo q sigue sin leerme: como le dije ya he leido muchas paginas, tutoriales, y tambien he buscado alguna soluciona mi problema navegando en google, y solo dejame decirte, si no te gusta leer a otros, entonces no respondas quieres,

primero q nada dejo una aclaracion: una capa (layer) puede ser un div o un span con algun tipo de posicionamiento(mientras no sea estatica)

ahora vuelvo a recalcar mi problema, y lo q pretendo hacer:
tengo varios div contenedores (estos con posicion relativa), dentro de cada div tengo una capa (span posicionado absolutamente respecto a su div contenedor)

el problema q tengo es q como tengo los div contenedores uno en seguida del otro, y el layer (span) excede por sus dimensiones y posicion de los margenes de su div contenedor, y pues el div contenedor q esta a continuacion se sobrepone al layer del div anterior(esto probandolo en IE)
para mas ilustracion me remito al codigo html q expuse al principio (para q vean el problema de forma grafica)

ahora bien en el fondo mi objetivo era posiconar varios layer(con zIndex>1) respecto cada uno a un div correspondiente, y pues la unica manera q halle de hacer esto fue haciendo lo ya mencionado

gracias a todos, sigo esperando sugerencia, o sera q es imposible lo pretendo??

gabrielflowers · #15 (**permalink**) 08/07/2009, 07:08

aca posteo nuevamente el codigo html para q lo prueben en IE, y se den cuenta de mi problema, y recalco nuevamente para los q casi no leen: estoy buscando posicionar un layer respecto a un div

Código HTML:

<div style="background:yellow;border:1px solid blue;position:relative;height:100px;">div contenedor1
<span style="background:blue;border:1px solid red;position:absolute;top:50px;left:50px;height:100px;width:100px;z-index:2;">LAYER1<br>layers de igual dimensiones</span>

</div>
<div style="background:yellow;border:1px solid blue;position:relative;height:100px;">div contenedor2
<span style="background:red;border:1px solid blue;position:absolute;top:50px;left:50px;height:100px;width:100px;z-index:2;">LAYER2</span>

</div>hola mundo q tal, como estan

kseso? · #16 (**permalink**) 08/07/2009, 07:51

Por alusiones:
El Sr. Kseso? sí te ha leído, todos y cada uno de tus comentarios en este tema.
Pero primero una aclaración a tu aclaración:

Cita:

una capa (layer) puede ser un div o un span con algun tipo de posicionamiento(mientras no sea estatica)

Reitero, eso no tiene ningún sentido, o mejor dicho, es un sinsentido.
ni en css ni en (x)html existen las capas (layers), esa terminología es cosa de las cebollas y de ciertos programas de diseño gráfico.
Lo que hay son etiquetas de marcado (tags), cada una de ellas pensadas para unos usos muy concretos, con sus propiedades y posibles valores: unas aportan estructura (pudiendo dar también estilos "visuales" vía css) y otras sólo lo segundo.

La etiqueta 'span' es del segundo tipo: no estructura el documento, es únicamente para añadir estilos "visuales" (preferentemente para diferenciar una parte de un elemento del resto del mismo elemento):

Cita:

además de ser un elemento en línea.

Si pese a todo quieres seguir usando la etiqueta span para un uso impropio y quieres que se sobreponga a los elementos posteriores en el flujo del html, aplica el z-index al padre, no a sus hijos.

gabrielflowers · #17 (**permalink**) 08/07/2009, 08:13

estimado señor ksesos, yo uso la terminologia usada por muchos, y en muchos tutoriales, pero no es mi intencion en este tema plantear un debate semantico de la web, ni de los terminos usados en ella,
mi problema ya lo plantee con los terminos q todos conocen, y solo busco una solucion a mi problema, seguire esperando aportes, o sera q no es posible??, saludos

pdta: señor ksesos ya probe con el z-index tanto para el div contenedor como para el layer y nada en explorer sigo teniendo mi problema

kseso? · #18 (**permalink**) 08/07/2009, 08:34

Bueno, con esto considero terminada mi participación en este tema:

gabrielflowers · #19 (**permalink**) 08/07/2009, 09:05

ok, ahora si te puedo decir gracias kseso, ese tipo de aportes es el q esperaba, gracias saludos

tupy · #20 (**permalink**) 08/07/2009, 10:42

gabrielflowers, sigue teniendo razón kseso, las etiquetas span son para elementos de tipo linea, y no bloque...Aún así, me alegro de que tengas tu "solución".

gabrielflowers · #21 (**permalink**) 08/07/2009, 12:42

tupy, en ningun momento dije q los span no fuese un elemento inline(en linea), y cambiando mis span a div no cambia basicamente en nada mi pagina

gabrielflowers · #22 (**permalink**) 08/07/2009, 13:03

señor kseso, permitame corregir lo anteriormente dicho, y debo decir que ni teniendo el div contenedor y su span interno(capa) el mismo z-index, mi problema no se ve solucionado, expongo micodigo nuevamente con tu sugerencia aplicada:

Código HTML:

<div style="position:relative;z-index:2;background:yellow;border:1px solid blue;height:100px;">contenedor1
<span style="position:absolute;z-index:2;background:blue;top:50px;left:50px;height:100px;width:100px;">
layer1
<br><br><br>layers de igual dimension
</span>
</div>

<br>

<div style="position:relative;z-index:2;background:yellow;border:1px solid blue;height:100px;">contenedor1
<span style="position:absolute;z-index:2;background:red;top:50px;left:50px;height:100px;width:100px;">
layer2
<br><br><br><br>aaaaaaa
</span>
</div>
hola como estan

willyfc · #23 (**permalink**) 08/07/2009, 13:35

No funciona en donde?. yo veo que funciona perfectamente como lo tienes, pueden llevar también el mismo z-index donde tu lo tienes diferente.

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.contenedor{position:relative;background:yellow;border:1px solid blue;height:100px; margin:0 0 15px 0;}
.layer/*Como tu le llamas*/{position:absolute; top:50px;left:50px;height:100px;width:100px;}
</style>
</head>
 
<body>
<div class="contenedor" style="z-index:2;">contenedor1
<div class="layer" style="z-index:2;background:blue;">
z-index:2
<br><br><br>layers de igual dimension
</div>
</div>
 
 
<div class="contenedor" style="z-index:1;">contenedor1
<div class="layer" style="z-index:1;background:red;">
z-index:1
<br><br><br><br>aaaaaaa
</div>
</div>
</body>
</html>

Sería bueno que leas bien los manuales, ya que si los hubieras leído como dices no tendrías este problema.

PD: Testeado en IE6,7, Chrome,FF, Safari y opera.

gabrielflowers · #24 (**permalink**) 08/07/2009, 13:54

hay un problema de solapamiento como dije ya anteriormente, yo lo estoy probando en IE6 y en FF3, sigo escuchando sugerencias
he aca una muestra del resultado:

willyfc · #25 (**permalink**) 08/07/2009, 13:59

A que te refieres con solapamiento?, firefox 5??, hagamos una cosa, sube una imagen de como quieres que se vea.

gabrielflowers · #26 (**permalink**) 08/07/2009, 14:08

en mi anterior intervencion puedes ver el solapamiento del q hablo, y puedan quizas entender mejor el problema expuesto ya reiteradas veces, gracias

kseso? · #27 (**permalink**) 08/07/2009, 14:15

Cita:

Iniciado por gabrielflowers

hay un problema de solapamiento como dije ya anteriormente, yo lo estoy probando en IE6 y en FF3, sigo escuchando sugerencias
he aca una muestra del resultado:

No, eso lo dices ahora:

Cita:

espero prueben el codigo mencionado en explorer sobre todo...

Cita:

haciendo mis pruebas sobre el problema mencionado pareciera q no tiene solucion al menos para explorer,

Cita:

...pues el div contenedor q esta a continuacion se sobrepone al layer del div anterior(esto probandolo en IE)

Cita:

aca posteo nuevamente el codigo html para q lo prueben en IE, y se den cuenta de mi problema, y recalco nuevamente para los q casi no leen: estoy buscando posicionar un layer respecto a un div

Cita:

pdta: señor ksesos ya probe con el z-index tanto para el div contenedor como para el layer y nada en explorer sigo teniendo mi problema

Y ahora es cuando lo mencionaste:

Cita:

hay un problema de solapamiento como dije ya anteriormente, yo lo estoy probando en IE6 y en FF3, sigo escuchando sugerencias
he aca una muestra del resultado:

willyfc · #28 (**permalink**) 08/07/2009, 14:15

yo lo que veo es esto:

limpia la caché del navegador.

gabrielflowers · #29 (**permalink**) 08/07/2009, 14:23

señor ksesos:
1. todo el tiempo hable del solapamiento del div contenedores sobre los layers (span)
2.dije que el problema se daba sobre todo en IE por q mis pruebas las hacia primeramente en IE, pero ahora estoy haciendo mis pruebas tambien en FF3

gabrielflowers · #30 (**permalink**) 08/07/2009, 14:24

señor ksesos:
1. todo el tiempo hable del solapamiento de los div contenedores sobre los layers (span) , si lees (de verdad) desde mi primer intervencio veras lo q dije:

Cita:

...veran tengo un div posicionado relativamente, y dentro del div tengo un span posicionado absolutamente, hasta ahi todo va bien, pero cuando clono este codigo mismo una vez mas, es ahi q me da problema de solapamiento del div principal sobre el layer (mis spans serian mis layers)...

2.dije que el problema se daba sobre todo en IE por q mis pruebas las hacia primeramente en IE, pero ahora estoy haciendo mis pruebas tambien en FF3

...pero hasta ahora nadie me ha dado un solucion a este problema, por q mejor en vez de revisar el contenido lexico del tema mejor se esfuerzan y contribuyen a encontrar una solucion?, gracias