position relative

[natig]

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!

[alexk]

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!...

[Nathan_1979]

Iniciado por alexk

mmm... te estas liando, mira antes que nada recordemos los de
"propiedad":"atributo"; ok?

MEG!

Lo correcto es:

Código css:

selector {
              propiedad: valor;
}
 

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

[alexk]

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

[kseso?]

Hola Natig:
Tu duda sobre la posición de un elemento, puedes verlo más completo aquí:

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

[natig]

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!

[alexk]

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!...

[natig]

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!

[alexk]

quitale el "fixed" si no te gusta...

[kseso?]

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:

#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.

¿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

[natig]

Pues qué faena...

Muchas gracias!

[alexk]

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