¿Cómo explicarías el posicionamiento CSS a un ser humano?

Question

compatriotas.

Yo, relativamente cuerda de cuerpo y mente, renuncio a entender el posicionamiento de CSS por mí mismo.

Los recursos en línea sobre CSS son muy detallados para explicar que el atributo "color" le permite establecer el "color" de las cosas. Unmöglish.

Entonces, que si se quiere poner algo a la izquierda de otra cosa (idea loca, ¿verdad?), todo que tiene que hacer es poner a flotar a la izquierda, pero siempre se establece la "relativa" bandera en su bloque padre que tiene que tener un nodo abuelo con el indicador "absoluto" establecido en verdadero para que esté ubicado relativamente a otro contenedor que puede o no contener nada, tener una posición, un tamaño o no , dependiendo del navegador, el tamaño de otras cosas y posiblemente las fases de la luna. (Se aconseja a los expertos en CSS que no tomen en serio el párrafo anterior. Estoy bastante seguro de que alguien dirá que mi despotricamiento no es válido o compatible con w3c y que solo se aplica a la versión beta de IE6)

Bromas aparte, estoy buscando cualquier recurso que explique las causas de toda la locura detrás del diseño en CSS. En esencia, algo que sería para CSS lo que los artículos de Crockford son para Javascript.

En este espíritu, permítanme señalar que no estoy buscando css bibliotecas o grid frameworks como blueprint, o para lenguajes de extensiones CSS como lesscss. He estado usando esos para aliviar mis sufrimientos, pero me temo que sería como decirle a alguien "solo use jQuery" cuando digan que no pueden concentrarse en la herencia de prototipos en JS.

Si todo lo que me puede indicar es http://shop.oreilly.com/product/9781565926226.do, supongo que me consideraré condenado.

Gracias de antemano.

EDITAR: Probablemente no debería haber hablado sobre "posicionamiento" (gracias a todos los que han explicado de nuevo que "posición: relativa" no significa "relativa a su contenedor" y que "posición: absoluta" significa relativa a algo. Nunca he estado tan cerca de hacer una secuencia de comandos monty python de una pregunta SO). Creo que me refería al diseño en general (posicionamiento + flotantes + líneas de base + todas las tonterías necesarias para poner cosas en línea recta).

También por favor disculpe el tono de despotricar, estoy tratando de poner un poco de humor en la frustración. Usaría técnicas zen para calmarme si pudiera, pero esto solo me recuerda a this.

Answer 1

Parece que la mayoría de los demás no han entendido la esencia de su publicación. Lo desglosaré por usted:

CSS positiong es complejo porque fue diseñado por diferentes grupos de personas durante un largo período de tiempo, con varias versiones y problemas de compatibilidad heredados.

Los primeros intentos fueron para mantener las cosas simples. Solo proporcione un estilo básico. Colores, fuentes, tamaños, magnetos, etc. Agregaron flotadores para proporcionar la funcionalidad básica de "recorte" donde el texto se envuelve alrededor de una imagen. Float no fue diseñado para ser utilizado como una característica principal de diseño como se usa actualmente.

Pero la gente no estaba contenta con eso. Querían columnas y cuadrículas, cajas y sombras, y esquinas redondeadas, y todo tipo de cosas, que se agregaron en varias etapas. Todo mientras intenta mantener la compatibilidad con implementaciones malas anteriores.

HTML ha sufrido de dos facciones opuestas que luchan entre sí. Un lado quería soluciones simples (en comparación con SGML existente de todos modos), otro lado quería aplicaciones ricas. Entonces CSS tiene este tipo de naturaleza esquizofrénica a veces.

Además, las funciones se ampliaron para hacer cosas que inicialmente no estaban destinadas a hacer. Esto hizo que las implementaciones existentes fueran muy defectuosas.

Entonces, ¿qué significa eso para usted, un simple humano? Significa que estás atascado lidiando con la ropa sucia de todos los demás. Significa que tiene que lidiar con errores de implementación de hace una década. Significa que debes escribir CSS diferentes para diferentes navegadores, o tienes que limitarte a un conjunto de funciones "bien respaldado" común, lo que significa que no puedes aprovechar al máximo lo que el último CSS puede hacer (ni puedes usar el características que fueron diseñadas para agregar cordura al estándar).

En mi opinión, no hay mejor libro para un "simple humano" a undrstand CSS que esto:

http://www.amazon.com/Eric-Meyer-CSS-Mastering-Language/dp/073571245X

Es simple, concisa, y le da ejemplos del mundo real en un brillante "fácil en el formato de "ojos", y sin la mayoría de la desagradable jerga técnica. Tiene 10 años, y no cubre ninguna de las cosas nuevas, pero debería permitirle "asimilar" la forma en que funcionan las cosas.

Answer 2

este enlace es principalmente acerca de z-index, pero la OMI que hace un muy buen trabajo de explicar cómo las cosas se colocan en una página

http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

Este enlace se centra más en el posicionamiento, pero es importante entender el eje z con el fin de entender el resto del rompecabezas posicionamiento

http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/

Answer 3

¿Ha revisado este gran libro? http://shop.oreilly.com/product/9781565926226.do

es una broma.

No creo que necesite un recurso completo dedicado a esta pregunta. Es bastante simple una vez que hace clic.

Piense en el posicionamiento de CSS como una forma de posicionar los elementos, ya sea relativamente a los niveles (donde caen en la página) o absolutamente a partir de una coordenada X/Y.

Puede colocar algo relativo y se moverá hacia arriba o hacia la derecha con un número positivo, o hacia abajo y hacia la izquierda con un número negativo.

Si coloca un elemento completamente, se eliminará completamente del diseño (los demás elementos no lo reconocerán como en la pantalla) y luego hará una de estas dos cosas. O bien:

1 - colóquese desde la esquina superior izquierda de la página y suba/baje a la derecha/izquierda como mencioné anteriormente, dependiendo de si los números son +/-.

2- Si el elemento PARENT se encuentra en absolute o relative se posicionará desde la esquina superior izquierda del elemento principal, NO en la ventana del navegador.

Piense en z-index como capas en photoshop. Con 0 siendo el final (y los navegadores más nuevos reconocen el índice z negativo para aún más diversión). y 100 como la parte superior más tarde (los navegadores más nuevos reconocen una cantidad infinita de números). El z-index solo funciona con la posición: relative y absolute.

Así que si coloco algo absoluto, y pasa a estar debajo de otro elemento, puedo darle z-index: 100 y se posicionará en la parte superior. Tenga en cuenta que el elemento en sí es un rectángulo y que el alto/ancho del elemento puede impedirle hacer clic en el elemento que se encuentra debajo. No puedes hacer ángulos, círculos, etc. con CSS puro.

¿Eso ayuda?

Answer 4

El posicionamiento es fácil de entender:

relative posicionamiento - representar la página exactamente como su costumbre. Una vez hecho esto, cualquier cosa con el posicionamiento relative se mueve, en relación a donde inicialmente estaba. Nada más se ve afectado.

absolute posicionamiento - Elimina el elemento del flujo de página. Otras cosas aparecen como si no estuvieran allí, es decir, completan el espacio que ocupó este elemento. Ahora están posicionados absolutamente al elemento más cercano con position: relative O position: absolute conjunto. En muchos casos, esto significa que se posicionan de forma absoluta en la etiqueta body.

A continuación, coloca las cosas con top, right, bottom y left en CSS.

Si algo tiene absolute conjunto de posicionamiento:

• posicionado con relación a la parte superior izquierda de la página cuando se utiliza top y left. Posicionada en relación con abajo a la derecha de la página al usar bottom y right.

• su anchura/altura puede controlarse con una combinación de top/bottom o left/right, por ejemplo: top: 100px; bottom: 100px hará un artículo que es 100% - 200px de la altura de su padre (a menos que especifique una altura demasiado en cuyo caso se utilizan top y height y bottom se ignora).

Answer 5

Hay más en el posicionamiento que solo la propiedad de la posición. Debes entender cómo funcionan las carrozas también.

http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Estos dos artículos debe conseguir que va.

Lea un poco las propiedades de la pantalla también, ya que es probable que sean una de las áreas problemáticas en cualquier html/css dado.

Answer 6

Estos dos cursos de academia de código deben explicar el posicionamiento CSS así:

First, Second.