CSS - alguien me puede explicar esto? position:absolute

   
Vista:

alguien me puede explicar esto? position:absolute

Publicado por juan elnovatojoven@gmail.com (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 ********/

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:

&#9642; Se buscan todos los elementos contenedores de la caja hasta llegar al elemento
<body> de la página.
&#9642; Se recorren todos los elementos contenedores empezando por el más cercano a la
caja y llegando hasta el <body>
&#9642; De todos ellos, el navegador se queda con el primer elemento contenedor que esté
posicionado de cualquier forma diferente a position: static
&#9642; 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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

alguien me puede explicar esto? position:absolute

Publicado por xve (349 intervenciones) el 24/05/2013 08:16:49
Hola Juan, eso es porque su contenedor tambien es position:absolute... ten en cuenta, que indicas que todos los divs sean position:absolute

Prueba a poner esto... ahora el cont ya no es un div, sino que es una <P>, por lo cual no es position:absolute:
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="es">
<head>
    <title></title>
<style>
#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;
}
</style>
 
</head>
<body>
<p id="cont">
    <div class="caja1"></div>
    <div class="caja2"></div>
    <div class="caja3"></div>
</p>
</body>
</html>


La otra cosa que podrías hacer, es especificar que el id cont no es position:absolute:
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="es">
<head>
    <title></title>
<style>
#cont {
    border:1px solid #000;
    height:500px;
    width:500px;
    margin:15px 200px;
    position:inherit;
}
 
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;
}
</style>
 
</head>
<body>
<div id="cont">
    <div class="caja1"></div>
    <div class="caja2"></div>
    <div class="caja3"></div>
</div>
</body>
</html>


Espero que te sirva... coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

alguien me puede explicar esto? position:absolute

Publicado por juan elnovatojoven@gmail.com (2 intervenciones) el 24/05/2013 18:05:09
pero... que chico dormido que soy!!
te pido disculpas por la molestia!

estos detalles se me escapan por ser novato.
estoy haciendo ejercicios de lo aprendido para afianzar los conceptos.
pero el que nacio dormido, vivira dormido...!!!

muchisimas gracias por tu tiempo!
Juan
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar