Cosas web, algunas úles, algunas buenas.
Fushioko, tiendas de productos de Asia

lunes, marzo 13, 2006

Cosas sobre CSS

Al menos en Firefox, me encuentro:

  • Si en una capa con position: relative escribo dentro unicamente una capa con position: absolute, el alto de la capa contenedora es cero. Para mí no tiene mucha lógica, porque lo que estás haciendo es "posicionar" la capa dentro de la otra, vale, está posicionada, pero sigue dentro de ella, y ¿cómo puede estar dentro de ella si la capa contenedora tiene tamaño cero?. Es como si me meto el monedero en el bolsillo, no puedo "posicionarlo" fuera del bolsillo. Aquí dentro va una capa, sí, la que está fuera.
    ¿Por qué esta capa está fuera de la contenedora si realmente está dentro?






    <span style="border: 1px solid #315C7C;   position: relative;">   Aquí dentro va una capa, sí, la que está fuera.   <div style="position: absolute;     top: 20px;     border: 1px solid #315C7C">       ¿Por qué esta capa está fuera de la contenedora si realmente está dentro?   </div> </span>

  • Si una capa tiene un width y un height fijos, si yo modifico el valor del padding, la capa aumenta el valor del padding en su tamaño. No tiene lógica, porque el padding es la distancia entre el borde y el contenido. Pues si el tamaño de la caja es 100px y el padding izquierdo es de 10px, quiere decir que empiezo a escribir en el pixel 10, pero no que el tamaño tiene que ser de 110px.
Bueno, quizás son cosas erróneas las que escribo, yo creo que a mí me ocurren. ¿Alguien sabe si esto tiene que ocurrir así? Actualización Federico me comenta que es debido a que al posicionarlo como absolute se sale del "normal flow", podéis ver su explicación en los comentarios.

7 Comentarios:

  • Absolute: Al elemento con absolute lo estás sacando del "normal flow" como lo llaman en las specs, así que es como si le definieras display: none. Que lo puedas posicionar relativamente a otro elemento es otro tema.
    width: lo que definis el ancho destinado al contenido. Padding, border y margin son accesorios, por eso son tomados aparte.

    Por Anonymous Federico, a las 3/14/2006 02:11:00 a. m.  

  • Gracias, Federico, por la explicación, así queda todo más claro. Por cierto, me ha encantado tu blog!!!

    Por Anonymous Luis, a las 3/14/2006 08:42:00 a. m.  

  • Lo que dice Fede es correcto, para lograr lo que vos querés tenés que hacerlo a la inversa.

    Posiciona el primer elemento como relativo(al flow normal) y el que se encuntra dentro lo ubicas absolutamente (dentro del elemento relativo) con respecto al elemento contenedor.

    Por Anonymous marcoss, a las 3/15/2006 05:40:00 a. m.  

  • No, está claro que si lo sacas de su flujo normal, pues se rompen las normas de "lo más lógico".

    Por Anonymous Luis, a las 3/15/2006 08:15:00 a. m.  

  • Un viejo documento de W3C explicando más sobre el tema. 'Absolute' Positioning:
    "Elements with 'absolute' positioning are formatted as rectangular overlays, outside the normal flow of the document, into which their contents flow. (...) the layout of each 'absolute' positioned element is independent of any others."
    Y con respecto a lo de relative, 'Absolute' positioning relative to the flow:
    "(The element has) its origin at the 'logical beginning' of the relatively positioned element. (...) relative positioning is used only to provide a local context for (absolute) positioning a child element."

    Como dije antes: position: absolute implica que el elemento deja de ocupar lugar (como si fuera un display: none, al contrario de visibility: hidden).
    Como extra tenés que puedas posicionarlo relativo a otro elemento.

    Por Anonymous Federico, a las 3/17/2006 09:17:00 a. m.  

  • Gracias de nuevo, voy a modificar la entrada para añadir tu explicación.

    Por Anonymous Luis, a las 3/17/2006 09:31:00 a. m.  

  • Pero yo estoy probando en firefox con capas dentro de otras capas, sin utilizar el "position" sino el "float" para las capas interiores y pasa lo mismo.
    En internet explorer va bien.
    ¿Alguna idea?

    Por Anonymous Anónimo, a las 10/19/2007 12:16:00 p. m.  

Publicar un comentario

<< Inicio