alguien me puede explicar esto? position:absolute
Publicado por juan (2 intervenciones) el 23/05/2013 20:43:53
Hola,
alguien me puede explicar por que los 3 cuadros (teniendo position:absolute), son absolutos al div contenedor (que no es position:relative) y no al body?
paso el codigo:
/******** HTML ********/
/******** CSS ********/
Segun una explicacion en una pagina web, los pasos para posicionar una caja en forma absoluta son los siguientes:
▪ Se buscan todos los elementos contenedores de la caja hasta llegar al elemento
<body> de la página.
▪ Se recorren todos los elementos contenedores empezando por el más cercano a la
caja y llegando hasta el <body>
▪ De todos ellos, el navegador se queda con el primer elemento contenedor que esté
posicionado de cualquier forma diferente a position: static
▪ La esquina superior izquierda de ese elemento contenedor posicionado es el
origen de coordenadas.
Una vez obtenido el origen de coordenadas, se interpretan los valores de las
propiedades top, right, bottom y left respecto a ese origen y se desplaza la caja hasta
su nueva posición.
No entiendo por que, entonces, a mi me toma como posicion absoluta, las coordenadas del div contenedor (que es position:static) y no del body.
¿Hay alguna explicacion a esto que no lo se?
Muchas gracias.
Saludos
alguien me puede explicar por que los 3 cuadros (teniendo position:absolute), son absolutos al div contenedor (que no es position:relative) y no al body?
paso el codigo:
/******** HTML ********/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="es">
<head>
<title></title>
<link rel="stylesheet" href="estilo.css" />
</head>
<body>
<div id="cont">
<div class="caja1"></div>
<div class="caja2"></div>
<div class="caja3"></div>
</div>
</body>
</html>
/******** CSS ********/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#cont {
border:1px solid #000;
height:500px; width:500px; margin:15px 200px;}div {border:1px solid #000;
height:200px; width:200px; position:absolute;}div.caja1 {
background-color:#CCC;
left:50px; top:50px;}div.caja2 {
background-color:#999;
left:100px; top:100px;}div.caja3 {
background-color:#666;
left:150px; top:150px;}Segun una explicacion en una pagina web, los pasos para posicionar una caja en forma absoluta son los siguientes:
▪ Se buscan todos los elementos contenedores de la caja hasta llegar al elemento
<body> de la página.
▪ Se recorren todos los elementos contenedores empezando por el más cercano a la
caja y llegando hasta el <body>
▪ De todos ellos, el navegador se queda con el primer elemento contenedor que esté
posicionado de cualquier forma diferente a position: static
▪ La esquina superior izquierda de ese elemento contenedor posicionado es el
origen de coordenadas.
Una vez obtenido el origen de coordenadas, se interpretan los valores de las
propiedades top, right, bottom y left respecto a ese origen y se desplaza la caja hasta
su nueva posición.
No entiendo por que, entonces, a mi me toma como posicion absoluta, las coordenadas del div contenedor (que es position:static) y no del body.
¿Hay alguna explicacion a esto que no lo se?
Muchas gracias.
Saludos
Valora esta pregunta
0
