relacion entre propiedades Float,position y display

Alguien pueed explicarme como interactuan entre ellas estas propiedades:
Float,Position y Display?Alguien me ped explicar rapidillo?gracias

1) float: flota un elemento a la izquierda (left) o derecha (right), si no especificas tamaño de ese elemento pues pasa a ser tan pequeño en anchura, como el contenido que tiene dentro.

2) position: puede ser relative, absolute, fixed o static.

- static es por defecto la que llevan los elementos y significa eso, estatico, y por lo tanto no se mueve de sitio.

- absolute es la mas complicada aunque es muy facil de entender, el elemento con esta posicion absolute debe tener un posicionamiento al menos, es decir, un valor para top, right, left o bottom, uno o varios de ellos. Absolute posicionara un elemento a tal distancia como indiques, tomando como referencia su posicion dentro de la capa padre. La capa padre será la primera que contenga una posicion relativa, y si no hay ninguna con posicion relativa pues tomara la base, por ejemplo el body.

- fixed (atencion no funciona en IE6 pero se puede emular con JS), este posicionamiento es como absolute pero el elemento se mantiene fijo en esa posicion, aunque por ejemplo bajes el scroll. recuerdas esos menús que te acompañaban a lo largo de una pagina cuando bajabas? pues eso.

- relative, significa relativa al elemento que la contiene, al contrario que absolute no necesita que ninguna capa anterior este posicionada con algo que no sea static. Recuerda que no debes dar static a nada porque ya lo son, a no ser que lo redefinas en otra parte de CSS y pase de absolute a static por ejemplo.

3) display: hay muchos modos de display, los principales son 'block' y 'inline'. En HTML hay una lista de elementos que son inline o block por defecto. Asi por ejemplo DIV, P, UL, H1,H2... son elementos de bloque (block) y SPAN, o STRONG son elementos de LINEA (inline). Con display puedes convertir un elemento de una forma en otra, por ejemplo si ncesitas que dos BLOQUES se muestren en linea. En bloque es como si ocuparan el 100% y por tanto el siguiente elemento salta debajo, como dos encabezados, h1, h2 por ejemplo.

Tambien dispones del util display:none, que oculta totalmente el elemento al que se lo asignes. Lo perderas de vision y no ocupara lugar en el layout. NO confundas con 'visibility: hidden', otra propiedad de CSS que es parecida a display. visibility:hidden haria como hace display:none pero mantendria el espacio que ocupa el elemento, aunque nolo verias, seria como invisible.

Espero haberte aclarado.

Saludos.

Que bueana esplicacion... a mi tambien me va a servir mucho [... guardando a archivo .TXT... ]

Pero queria matizarte esto:

Capt.Mahou escribió:

No funciona en etiquetas DIV [en otras no lo se, no lo he probado] pero si lo pones en BODY te deja fijo el fondo de la pagina.

Bueno, solo eso.

Bueno veras, en realidad fixed en IE6 si que funciona, pero completamente a su manera. Es como un hibrido entre relative y absolute. Lo que está claro es que no cumple su funcion.

En fin, me alegro que os haya servido, entenderlo tan bien solo se consigue a base de leer articulos y de experiencia

debería ser un tuto, muy bien explicado. gracias

Hay una forma de emular el position:fixed sin javascript en IE6, yo lo hice.

NEO_JP escribió:

Por que no nos lo explicas?

Viendo por encima el css parece que la propiedad usada para el efecto es esta:
* html #nav { position:absolute; }
por que el estilo para el id #nav, no le veo nada extraño, lo normal para el efecto en ff o navegadores decentes...
#nav { text-align:center; position:fixed; top:20px; z-index:10; width:100%; background:#333; padding:5px 0; }
Si alguien puede probarlo se le agradece, por que yo en este momento no tengo tiempo....

Yo normalmente uso esto para ie: (claro solo funciona para fijar en vertical)
#nav{
z-index: 99;
_position: absolute;
_top: expression((dummy = document.documentElement.scrollTop) + "px");
}

se puede utilizar el fixed con internet explorer 6? alguien ha probado este ejemplo, pq yo creo que no hay manera como no sea sin javascript. Por favor si alguien lo averigua que lo cuente. Gracias.

Ya te lo cuento yo, fixed en IE 6 no se interpreta, o al menos de la forma correcta, asi que debes "emularlo" con javascript. Tienes muchos ejemplos sobre como hacerlo en google.

Saludos

Gracias NEO_JP

No he revisado exactamente como funciona si es con JavaScript o CSS puro, pero lo que si sé es que funciona perfecto con IE6, las soluciones que había encontrado hasta ahora se ven bien en Firefox y los demás pero en IE6 cuando se hace Scroll la capa se mueve como si quisiera salir de ahí y luego se vuelve a posicionar se ve horrible ese 'brinquito', sabía que se podía porque la gente de GMail lo hace en IE6 y sin 'brinquitos'...

Revisaré como funciona y trataré de explicarlo más adelante aunque la persona más adecuada para explicarlo es NEO_JP

Gracias de nuevo NEO_JP, llevo días buscando esto...