Foros del Web » Creando para Internet » CSS »

algo que no entiendo, position: absolute

Estas en el tema de algo que no entiendo, position: absolute en el foro de CSS en Foros del Web. Que tal, creo que mi duda no tendria que ser tan dificil de despejar, pero siempre me gusta preguntarle a algun experimentado y en fdw ...
  #1 (permalink)  
Antiguo 15/04/2010, 22:07
 
Fecha de Ingreso: diciembre-2005
Ubicación: Mar del Plata
Mensajes: 146
Antigüedad: 12 años
Puntos: 2
algo que no entiendo, position: absolute

Que tal, creo que mi duda no tendria que ser tan dificil de despejar, pero siempre me gusta preguntarle a algun experimentado y en fdw siempre los hay .

necesitaría trabajar con posiciones absolutas, hasta allí todo bien:

Código:
#midiv {
position: absolute;
top:40px;
left:80px;
}
si este codigo lo veo con una resolucion de 1024px768 lo voy a ver posicionado en una parte de la página, pero si lo veo por ejemplo con 2048x1024 lo voy a ver posicionado en otra parte diferente de la página, entonces... como hago para trabajar con posicion:aboluste y que siempre coincida la "coordernada" que le doy a la capa para posicionarse?

espero que puedan solucionar esta duda ya que desde que estoy aprendiendo a trabajar con css nunca pude realizar nada con esto...

muchas gracias!
  #2 (permalink)  
Antiguo 16/04/2010, 05:46
Avatar de Flow89  
Fecha de Ingreso: abril-2010
Ubicación: Valladolid
Mensajes: 346
Antigüedad: 7 años, 7 meses
Puntos: 1
Respuesta: algo que no entiendo, position: absolute

Utilizando % en vez de pixeles.
Entonces lo que le estarías diciendo es que estubiese SIEMPRE (incluso si haces mas pequeña la ventana del explorador porque no esta maximizada) a un 4o por ciento del top y un 80% del lado izquierdo.

Claro está que no son las mismas medidas los porcientos que los px, asique partiendo del 100% inicial, utilizalo como creas necesario.

Creo que esa sería la solución correcta.
  #3 (permalink)  
Antiguo 17/04/2010, 14:53
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: algo que no entiendo, position: absolute

Hola:

Tengas la resolución que tengas siempre lo veras en la misma posición (40px y 80px), la solución sería trabajar en porcentajes o en em.

Saludos.

  #4 (permalink)  
Antiguo 17/04/2010, 17:15
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: algo que no entiendo, position: absolute

Hola, me sumo al debate:

cpuser, seguramente sabras que position:absolute; quita la caja-css del flujo normal del documento, lo que quiere decir que la posicion de ésta pasa a depender de la distancia que se le de respecto del punto de coordenadas 0,0 que se encuentra en la esquina superior izquierda.

Ahora, interpreto que tu problema puede ir por este lado:
¿como controlar una caja si esta se encuentra dentro de otra que está centrada.?

supongamos:
caja1 --> centrada
caja2 --> anidada en caja1

Si trabajas con position:absolute; (en caja2) estaras en problemas, ya que su posicion dejara de depender de caja1 y con ello tu maqueta se descuadrará en distintas resoluciones. (Haz la prueba)

Para ello, lo que hago es usar position:relative; (en caja2) que como sabras permite que nuestra caja siga perteneciendo al flujo normal del documento, en otras palabras, su posicion depende de su elemento padre o contenedor (caja1).

Espero te sea de utilidad, un saludo
  #5 (permalink)  
Antiguo 17/04/2010, 18:14
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: algo que no entiendo, position: absolute

cristian_cena
Cita:
para ello, lo que hago es usar position:relative; (en caja2)
seria en caja 1 no? y absolute en caja 2...

bueno yo creo que la unidad de medida que uses,
es factor siempre y cuando a que sea relativo como indica cristian_cena,
es decir, si tenemos el div con % flotando alli en la galaxia pues estara en la posicion deseada de acuerdo al 100% de la ventana...
cosa que con una medida fija pues este se "movera"... ya que siempre estara a Xpx del contenedor "relativo" en este caso el 100% de la ventana.

pero que pasa si le indicamos que su posicion sea relativo a....
un div padre que sigue el flujo normal del sitio, con una medida fija?...
pues este se quedara donde le indiquemos sea cual sea el tamaño de la ventana, ya que su posicion sera relativa, deacuerdo con el div padre...

para mi la manera correcta de usar las posiciones absolutas...
teniendo un div padre relativo bien posicionado...

http://librosweb.es/css/capitulo5/posicionamiento.html
http://librosweb.es/css/capitulo5/po..._relativo.html
http://librosweb.es/css/capitulo5/po..._absoluto.html

  #6 (permalink)  
Antiguo 18/04/2010, 02:38
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: algo que no entiendo, position: absolute

Hola alex como va, a lo que me refiero es a:

<body>
<padre><hijo></hijo></padre>
</body>

Suponiendo que <padre> es el contenedor de la maqueta, y está centrado ( padre {margin: 0 auto;})
Entonces si sucede que damos posicion absoluta a <hijo>, la posicion de este ya dejara de depender de la posicion de <padre> pasando a depender de la coordenada 0,0.

Sin embargo, si a este <hijo> damos posicion relativa logramos que siga dependiendo de <padre>

Con lo que logramos "controlar" la posicion de <hijo> en una maqueta centrada a diferentes resoluciones, ya que por ejemplo, digamos que <hijo> esta posicionado de forma absoluta y a este le damos {left:250px;}, entonces: no es la misma distancia left:250px; en un monitor de resolucion 1024px que left:250px; en un monitor de resolucion "N"px. Es decir, lo que en mi monitor se ve en el lugar que deseo en el de pepito que es mas mas grande ya se ve un poco mas hacia la izquierda.

En resumen, es una simple práctica personal con la que controlo que no se me "descuadre" la maqueta y nada mas que eso.

CITO="para mi la manera correcta de usar las posiciones absolutas...
teniendo un div padre relativo bien posicionado..."

Alex, ¿puedes explicarme como es eso de dar posicion absoluta a los hijos y posicion relativa a los padres? Nunca lo he hecho conscientemente, es decir:

Al momento de hacer una pagina, separo el contenido. Aquel que va a ser posicionado de forma absoluta simplemente lo incluyo al final del documento, total cuando le aplique position:absolute; este dependera de ejeCoordenada:0,0 . Y a los demás elementos o bien no le doy posicion (con lo que me quedaría el valor por defecto "static") o bien lo posiciono de forma relativa. Con lo que me quedaria un elemento hijo relativo a un padre "static", o un hijo static dentro de un padre relativo, o alguna de estas variantes.

Bueno, nada, un abrazo alex, me alegra encontrarte nuevamente, te comento que me pase por tu sitio, muy buen trabajo

Última edición por cristian_cena; 18/04/2010 a las 03:38
  #7 (permalink)  
Antiguo 18/04/2010, 05:21
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: algo que no entiendo, position: absolute

Hola:

También puede ser interesante la guía que Mikmoro aportó al foro: Pequeña guía de Migración.

Aunque es muy interesante toda, y se lee en poco tiempo, lo más útil en este caso es el apartado 3.

Saludos.

  #8 (permalink)  
Antiguo 18/04/2010, 08:55
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: algo que no entiendo, position: absolute

Cita:
¿puedes explicarme como es eso de dar posicion absoluta a los hijos y posicion relativa a los padres? Nunca lo he hecho conscientemente, es decir
mmmm interesante tu solucion... pero creo, que si tenemos muchas posiciones absolutas, que no siempre se da pero puede presentarse en algunas ocaciones, porner todos estos elementos en un mismo lugar "debajo de todo el documento", lo siento un poco incomodo...

a lo que me refiero de posicion relativa a los padres y posicion absoluta a los hijos...
es que primero en el HTML estan posicionados como elementos estaticos como cualquier otro todo en su sitio, luego de agregar posicion relativa a un contedor centrado de mmm 960px por ejemplo....
nuestro elemento hijo (con posicion absoluta) ya no tomara las coordenadas "0.0" (que es el ancho de la ventana que varia segun la resolucion) sino, las de nuestro contenedor fijo, de 960px... asi que sin importar la resolucion las coordenadas seran siempre del contenedor y no de la ventana.

Relative 0.0 (se movera segun el tamaño de la ventana)


Relative Div 960px (se movera segun este div)


espero haberme explicado bien jeje... sino como dije antes
http://librosweb.es/css/capitulo5/po..._absoluto.html
alli esta mas clarito...

Cita:
Bueno, nada, un abrazo alex, me alegra encontrarte nuevamente, te comento que me pase por tu sitio, muy buen trabajo
Venga igual... jeje gracias!...
  #9 (permalink)  
Antiguo 18/04/2010, 15:21
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: algo que no entiendo, position: absolute

(por alguna razon se duplico el #10) disculpas.

Última edición por cristian_cena; 18/04/2010 a las 15:26
  #10 (permalink)  
Antiguo 18/04/2010, 15:25
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: algo que no entiendo, position: absolute

Ahhh, me acabo de leer el manual y ahora entiendo lo que dices.

Yo pensaba que la posicion absoluta siempre pero siempre quitaba la caja del flujo normal del documento y la posicionaba respecto del eje de coor. 0,0 y ahora veo que no es así. Sino que el navegador busca el primer padre posicionado diferente de "static" y si lo encuentra ya nuestro hijo absoluto dependera del eje de coordenadas 0,0 de este.

El resultado seria como posicionar una caja de forma relativa dentro de otra "static" (la posicion del hijo depede del eje coor. 0,0 del padre, por tanto depende de su posicion) con la ventaja de que al usar posicion absoluta quitamos la caja caja del flujo normal (no ocupamos espacio ... excelente diría el sr. burns).

Gracias alex, aclarado el tema, diseñográficamente hablando super potente por cierto .

Ah ... por las dudas, ¿sabes como interpreta IE 6,7y8 todo esto? me vendria bien saberlo je, asi ahorro de llamar a un neurólogo, desde ya gracias.

Saludos

Última edición por cristian_cena; 18/04/2010 a las 15:39
  #11 (permalink)  
Antiguo 18/04/2010, 15:47
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: algo que no entiendo, position: absolute

cristian_cena jeje que bien que este aclarado...

Cita:
Ah ... por las dudas, ¿sabes como interpreta IE 6,7y8 todo esto? me vendria bien saberlo je, asi ahorro de llamar a un neurólogo, desde ya gracias.
bueno por propias experiencias... no eh tenido ningun problema... ademas que los 2 valores son bien soportados por estos navagadores, siempre y cuando esten posicionados "top, right, bottom, left" es mejor especificar aun que usemos 0 0... para evitar problemas.

  #12 (permalink)  
Antiguo 18/04/2010, 15:53
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: algo que no entiendo, position: absolute

Que bien, por fin una buena! Gracias, un abrazo

Etiquetas: position
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 05:49.