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. Hola! He leido q para posicionar un div el atributo "position" tiene dos valores: absolut o relative. No entiendo bien el relative: relative indica que ...
  #1 (permalink)  
Antiguo 19/07/2009, 09:57
 
Fecha de Ingreso: enero-2007
Mensajes: 323
Antigüedad: 10 años, 11 meses
Puntos: 9
position relative

Hola!

He leido q para posicionar un div el atributo "position" tiene dos valores: absolut o relative. No entiendo bien el relative: relative indica que la posición de la capa es relativa a el lugar donde se estaba escribiendo en la página en el momento de escribir la capa con su etiqueta.

Si yo pongo el valor "relative" ¿luego en el tamaño de la capa debo poner porcentajes?, si es así, el porcentaje sobre qué se aplica: ¿sobre el tamaño de la ventana?, ¿sobre la resolución de pantalla?, ¿sobre el div en q está metido el anterior?

Muchas gracias!
  #2 (permalink)  
Antiguo 19/07/2009, 10:56
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: position relative

mmm... te estas liando, mira antes que nada recordemos los de
"propiedad":"atributo"; ok? bueno ahora recordemos que: "todo elemento html trae por default position:relative;(algunos navegadores position:static;)" y "position" tiene como atributo a
:absolute; Hace que un "elemento" flote dentro de otro con "position:relative" y acomodarlo en "coordenadas" top,right,bottom,left y margin....
:fixed; Hace que un "elemento" quede fijo, (sin moverse) [No funciona en IE6]
:inherit; Hace que herede la "position" de un elemento anterior/contenedor
:relative; Punto clave para un "elemento" con "position:absolute" ya que sera el origen de sus "coordenadas" y se basara su posicion, "relativamente" a este objeton con esta propiedad "relative".
:static; Como se indica antes es una posicion que viene por defaul, y solo se usa cuando estamos heredando, y especificamos que en este "elemento" no lo haga. y consever su posicion (uno de tras de otro, normalmente).

Espero te sirva de algo mis palabras jeje... chao y suerte!...
  #3 (permalink)  
Antiguo 19/07/2009, 12:22
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 10 años, 6 meses
Puntos: 9
Respuesta: position relative

Cita:
Iniciado por alexk Ver Mensaje
mmm... te estas liando, mira antes que nada recordemos los de
"propiedad":"atributo"; ok?

MEG!

Lo correcto es:

Código css:
Ver original
  1. selector {
  2.               propiedad: valor;
  3. }

Ya que he visto en alguna otra página que le ponen el nombre de atributo a la propiedad... y eso tampoco es correcto.


__________________
Debian Squeeze rules!
  #4 (permalink)  
Antiguo 19/07/2009, 14:04
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: position relative

Nathan_1979 gracias por la correcion, igual creo que se entendio... en realidad atributo... son todas las "pripiedades+valor" segun tengo entendido pero bua, un juego de palabras, pero si esta correcto como dices gracias, chao y suerte...

PD: No desviemos jaja... perdona natig, pero si aun no esta claro pregunta tranki, chao
  #5 (permalink)  
Antiguo 19/07/2009, 14:22
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: position relative

Hola Natig:
Tu duda sobre la posición de un elemento, puedes verlo más completo aquí:
Cita:
En CSS2, una caja puede situarse según tres esquemas de posicionamiento:
1. Flujo normal, ocupa el lugar que le corresponde según sus propiedades y el momento que aparece en el html
2. Flotantes. En el modelo flotante, un caja se sitúa primero según el flujo normal, luego se saca del flujo y se mueve a la izquierda o a la derecha tanto como sea posible.
3. Posicionamiento absoluto. En el modelo de posicionamiento absoluto, una caja es quitada completamente del flujo normal (no tiene ningún impacto sobre los hermanos siguientes) y se le asigna una posición con respecto al bloque que la contiene.
Otra cuestión totalmente distinta es el tamaño. Puedes ver los valores posibles y los elementos a que admiten el ancho (width) y alto (height)

Y recuerda que si calculas el tamaño en %, éste se refiere a la caja contenedora del elemento, por lo que tiene que estar declarado explícitamente.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 19/07/2009, 18:05
 
Fecha de Ingreso: enero-2007
Mensajes: 323
Antigüedad: 10 años, 11 meses
Puntos: 9
Respuesta: position relative

Muchas gracias por vuestras respuestas, han sido muy esclarecedoras!

Pero tengo más preguntas, jeje, si yo tengo un div que es el contenedor, ¿podría hacer q su tamaño variara según el tamaño de la ventana o la resolución de pantalla?

En declaración de estilos tengo esto:

body {
font-family: Tahoma, Verdana, sans-serif;
background-image:url(http://img13.imageshack.us/img13/879...020copia.png);
background-color: #E9E9E9;
background-attachment: fixed;
background-repeat:repeat-y;
background-position:center;
margin: 0;
padding: 0;
color:#000000;
text-align:center;
height: 100%;
}

#contenedor{
text-align: left;
width: 1000px;
background-color:#FFFFFF;
margin:inherit;
position:relative
}

Gracias!
  #7 (permalink)  
Antiguo 19/07/2009, 20:17
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: position relative

claro natig solo que cuando "width: 1000px;" esto es una posicion estatica, deberias de cambiarla a "width: 96.1%;" al usar porcentajes se acomodara segun la resolucion, si usas el "100%" pues cubrira todo lo visible (en cuanto al ancho). chao y suerte!...
  #8 (permalink)  
Antiguo 20/07/2009, 07:43
 
Fecha de Ingreso: enero-2007
Mensajes: 323
Antigüedad: 10 años, 11 meses
Puntos: 9
Respuesta: position relative

Muchísimas gracias!!

Y ahora...otra duda!

¿Cómo podría hacer para q mi imagen de fondo (un patrón q se repite verticalmente), también se ajuste a la resolución? Es decir, que aunq yo haga más pequeña la ventana, siga ocupoando todo el espacio en horizontal.

Gracias!

Si no me he explicado bien, decídmelo!
  #9 (permalink)  
Antiguo 20/07/2009, 09:28
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: position relative

quitale el "fixed" si no te gusta...
  #10 (permalink)  
Antiguo 20/07/2009, 16:10
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: position relative

Cita:
Pero tengo más preguntas, jeje, si yo tengo un div que es el contenedor, ¿podría hacer q su tamaño variara según el tamaño de la ventana o la resolución de pantalla?
Sí. Sólamente tienes que definir su tamaño en una unidad relativa que tome como referente la ventana (que será el tamaño de body por defecto).
Así, en tu ejemplo, sólo tienes que cambiar:
Cita:
#contenedor{ width: xx%}
Muy importante fijar una anchura máxima y una mínima (max/min-width) para evitar "desparrames" o colapsos.
Alexk, son cosas totalmente distintas el tamaño y la posición como comentaba en el #5.
Cita:
¿Cómo podría hacer para q mi imagen de fondo (un patrón q se repite verticalmente), también se ajuste a la resolución? Es decir, que aunq yo haga más pequeña la ventana, siga ocupoando todo el espacio en horizontal.
Son cosas incompatibles, o se adapta o se repite, pero no puede hacerse una adaptación repetitiva o una repetición adaptativa

Hay varios ejemplos de "fondo elástico" (ya sea deformándose la imagen o manteniendo las proporciones.
En www.araudi.net tienes alguno.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 20/07/2009, 17:11
 
Fecha de Ingreso: enero-2007
Mensajes: 323
Antigüedad: 10 años, 11 meses
Puntos: 9
Respuesta: position relative

Pues qué faena...

Muchas gracias!
  #12 (permalink)  
Antiguo 21/07/2009, 09:38
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: position relative

kseso? mmm... nunca eh tenido problemas, con un "overflow" basta. "max/min" no hay en ie6, bueno en lo personal nunca eh tenido problemas en todos los navegadores. lo del "fixed" me referia al background jaja... no se k paso no se posteo bien le di un ejemplo de poner un fondo... pero bueno ya esta todo arreglado segun natig
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 03:45.