Foros del Web » Creando para Internet » CSS »

Position relative

Estas en el tema de Position relative en el foro de CSS en Foros del Web. Vamos, es algo simple, pero hasta ahora no lo entiendo, y eso que se supone que soy un experto en programación web. Bien, la pregunta ...
  #1 (permalink)  
Antiguo 16/11/2008, 16:42
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Position relative

Vamos, es algo simple, pero hasta ahora no lo entiendo, y eso que se supone que soy un experto en programación web. Bien, la pregunta es sencilla, qué hace una position relative? (CSS) Yo cuando leo los manuales me suena igual al valor static, no entiendo cual es la diferencia entre uno y otro. A lo mejor no lo entiendo porque nunca tuve la necesidad de usarlo, o a lo mejor si la tuve, pero lo solucioné de otro modo, en fin, algún gurú en CSS que me pueda aclarar este simple punto.

Gracias de todos modos.

Última edición por ElJavista; 16/11/2008 a las 17:30
  #2 (permalink)  
Antiguo 16/11/2008, 16:58
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Position relative

Échale un ojo...
posicionamiento

Aresillo!!
EDITO: Para culminar te dejo este link, que te deja cambiar la posición... así ves la diferencia...
  #3 (permalink)  
Antiguo 16/11/2008, 16:59
Avatar de xhiena  
Fecha de Ingreso: enero-2008
Ubicación: Valencia
Mensajes: 34
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: Position relative

Absolute tengo entendido que posiciona al elemento en el (0,0) del elemento relative en el que esta incluido, si no lo esta en ninguno de body.

es decir, tienes un relative centrado a 20px de la izq y a 0px del alto, pues los absolutes hijos que tenga estarán a 20px de la izquierda y a 0 de alto (y luego ya los mueves)
  #4 (permalink)  
Antiguo 16/11/2008, 17:32
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Position relative

Que error! quise preguntar sobre position: relative, no absolute, pero acaso no se dijeron cuenta que el título de la pregunta era uno y la pregunta en sí era otro? En fin, la pregunta que quise hacer es, qué hace position: relative y no me manden a ningún manual que ya he visto varios, quiero que con un ejemplo me aclaren el asunto, ya que como dije, cuando veo los manuales la position relative me suena igual que static, por favor díganme cual es la diferencia.
  #5 (permalink)  
Antiguo 16/11/2008, 17:40
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Position relative

EDITO: porque la respuesta dada no correspondía realmente a la duda.
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 16/11/2008 a las 19:05
  #6 (permalink)  
Antiguo 16/11/2008, 18:05
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Position relative

Gracias Mikmoro por tu buena respuesta, no esperaba menos de ti, pero te has equivocado en la pregunta, parece que el error de poner "absolute" se te quedó en el cerebro y pensaste que pregunté la diferencia entre la posición absolute y la relative, conozco bien como es la posición absolute, la uso todo el tiempo en las capas. Si lees bien ambos mensaje que he hecho en este tema, lo que quiero es la diferencia con la posición static que es la que viene por defecto y la relative, o sea, cuando leo los manuales pues me suena igual la posición relative con la static, no sé cual es la diferencia, hazme por favor la aclaración de las diferencias. Gracias de antemano, sé que podrás responder correctamente a mi pregunta.
  #7 (permalink)  
Antiguo 16/11/2008, 19:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Position relative



Lo que se me había quedado pegado en el cerebro era haber interpretado fixed en lugar de estatic. He pensado absolute y fixed frente a relative

Bien, como dices la posición static es la que tiene por defecto un elemento cualquiera. La posición estática significa que es colocada donde le corresponde según el flujo del documento, es decir, que se ve sencillamente afectada por las reglas generales de css como float o margin.

La diferencia principal es que no puede ser desplazada con arreglo a los parámetros de su posición, y por lo tanto no se puede mover con left o top, por ejemplo. El nombre podría llevar a un error, porque efectivamente su posición es relativa al resto de elementos que haya antes que ella, pero a su vez es estática con respecto a la posición en el flujo que le toca y no puede ser desplazada por coordenadas, mientras que la relative si.

Otra cosa importante es que cuando una caja con posición relativa se desplaza, físicamente sigue ocupando el sitio que ocuparía si no lo hubiera sido, lo cual es importante para las cajas que vengan tras ella.

Aparte de esto, creo que ya conocerás que tener posición estática, para un navegador como "el maldito", es como no tener posición, y esto produce infinidad de errores que muy a menudo se resuelven poniendo a un elemento posición relativa, lo que le hace ganar posición y si no lo tienes por qué desplazar, la diferencia es nula.

Lamento la confusión. Voy a editar el anterior mensaje porque es un completo error, y de cara a tu duda carece de sentido
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 17/11/2008, 12:57
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Position relative

Un ejemplo: copia y pega este código

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>
<title>ElJavista</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div {width: 300px; height: 100px;margin: 20px auto;color: #fff;padding: 10px;}
#caja1, #caja3 {background-color: #f00;}
#caja2, #caja4 {background-color: #00f;}
#caja3 {position: relative; top: -10px;}
</style>
</head>
<body>
<div id="caja1">Caja con posición estática y 20px de margen superior e inferior</div>
<div id="caja2">Caja con posición estática y 20px de margen superior e inferior</div>
<div id="caja3">Caja con posición RELATIVA, 20px de margen superior e inferior, y un desplazamiento superior de -10px. Como se ve se deplaza hacia arriba, pero para la siguiente caja es como si no se huiera desplazado</div>
<div id="caja4">Caja con posición estática y 20px de margen superior e inferior</div>
</body>
</html>
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 17/11/2008, 13:46
 
Fecha de Ingreso: junio-2004
Mensajes: 266
Antigüedad: 13 años, 5 meses
Puntos: 8
Respuesta: Position relative

No es por hacer spam pero hace 2 horas publiqué esto y creo que te será de mucha ayuda:

http://websenior.wordpress.com/2008/...edad-position/

es un manual, PERO con ejemplos para ver como funciona realmente la combinación de distintas capas aplicando distintos valores de position.

Saludos y espero que te sirva como me sirvió a mi en su dia.
__________________
WebSenior
  #10 (permalink)  
Antiguo 19/11/2008, 09:09
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Position relative

Creo que finalmente lo entendí, en la posición relative se puede usar el top y también el left y eso provoca un deplazamiento con respecto a su posición, pero es como si continuara en el mismo lugar para los demás elementos adyacentes, ya veo. Entiendo. Gracias a todos por su atención.
  #11 (permalink)  
Antiguo 19/11/2008, 10:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Position relative

Sí, así es en resumen. Acepta los 4, claro: left, right, top y bottom.
__________________
Visita mi nueva web idplus.org
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




La zona horaria es GMT -6. Ahora son las 20:46.