Come spiegheresti il ​​posizionamento dei CSS su un essere umano?

Question

compagni di terra.

Io, relativamente sano di mente e corpo, con la presente rinuncia a comprendere il posizionamento dei CSS da solo.

Le risorse online sui CSS sono particolarmente utili per spiegare che l'attributo "colore" consente di impostare il "colore" delle cose. Unmöglish.

Poi, che se si vuole mettere qualcosa alla sinistra di qualcos'altro (folle idea, giusto?), tutto quello che dovete fare è impostare a galleggiare sulla sinistra, si imposta la "relativa" segnala sul suo blocco padre che deve avere un nodo padre-padre con il flag "absolute" impostato su true in modo che sia posizionato relativamente a un altro contenitore che può contenere o meno qualcosa, avere una posizione, una dimensione o meno a seconda del browser, della dimensione di altre cose e, eventualmente, delle fasi lunari. (Gli esperti di CSS sono invitati a non prendere sul serio il paragrafo precedente, sono abbastanza sicuro che qualcuno indicherà che il mio rant non è valido, o conforme a w3c - e che si applica solo alla versione beta svedese di IE6)

Scherzi a parte, sto cercando qualsiasi risorsa che spieghi le cause alla radice di tutta la follia dietro il layout in CSS. In sostanza, qualcosa che sarebbe per i CSS quali sono gli articoli di Crockford in Javascript.

In questo spirito, vorrei sottolineare che non sto cercando librerie di css o framework di griglia come blueprint, o per i linguaggi di estensione CSS come lesscss. Ho usato quelli per alleviare le mie sofferenze, ma temo che sarebbe come dire a qualcuno di "usare solo jQuery" quando dicono che non possono preoccuparsi dell'erede del prototipo in JS.

Se tutto quello che mi puoi indicare è http://shop.oreilly.com/product/9781565926226.do, credo che mi considererò condannato.

Grazie in anticipo.

EDIT: Probabilmente non avrei dovuto parlare di "posizionamento" (grazie a tutti coloro che hanno spiegato nuovamente che "posizione: relativa" non significa "relativo al tuo contenitore" e che "posizione: assoluta" significa relativo a qualcosa. Non sono mai stato così vicino a creare uno script monty python da una domanda SO). Penso che intendevo il layout in generale (posizionamento + float + linee di base + tutte le sciocchezze richieste per mettere roba su una linea retta).

Anche per favore scusa il tono di voce, sto cercando di versare un po 'di umorismo in frustrazione. Vorrei usare le tecniche zen per calmare se potessi, ma questo mi ricorda solo lo this.

Answer 1

Sembra che molti altri non abbiano ancora compreso l'essenza del post. Lo analizzerò per voi:

Il positiong di CSS è complesso perché è stato progettato da molti gruppi diversi di persone per un lungo periodo di tempo, con varie versioni e problemi di compatibilità legacy.

I primi tentativi erano di mantenere le cose semplici. Basta fornire uno stile di base. Colori, caratteri, dimensioni, magins, ecc. Aggiunti i float per fornire la funzionalità di "ritaglio" di base in cui il testo si avvolge attorno a un'immagine. Float non è stato concepito per essere utilizzato come una delle principali funzioni di layout in quanto è attualmente utilizzato.

Ma la gente non era felice con quello. Volevano colonne, griglie, riquadri e ombre, angoli arrotondati e tutti i tipi di altre cose, aggiunte in varie fasi. Tutto ciò mentre si cerca di mantenere la compatibilità con precedenti cattive implementazioni.

L'HTML ha sofferto di due opposte fazioni che lo hanno smentito. Un lato voleva soluzioni semplici (rispetto alle SGML esistenti), un altro lato voleva applicazioni ricche. Quindi i CSS hanno questa specie di natura schizofrenica a volte.

Inoltre, le funzionalità sono state estese per eseguire attività che inizialmente non erano state progettate. Ciò ha reso tutte le implementazioni esistenti tutte molto buggy.

Quindi cosa significa per te, un semplice umano? Significa che sei bloccato a fare affari con tutti gli altri panni sporchi. Significa che devi affrontare bug di implementazione decennali. Significa che devi scrivere CSS diversi per browser diversi oppure devi limitarti a un insieme di funzioni "ben supportate", il che significa che non puoi trarre il massimo vantaggio da ciò che può fare il CSS più recente (né puoi usare il le caratteristiche sono state progettate per aggiungere un po 'di sanità allo standard).

A mio parere, non c'è nessun libro migliore per un "semplice essere umano" per undrstand CSS di questo:

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

E 'semplice, conciso, e ti dà esempi del mondo reale in un lucido "facile sugli occhi "e mancano la maggior parte del gergo tecnico sgradevole. Ha 10 anni e non copre nessuna delle nuove cose, ma dovrebbe permetterti di "ingannare" il modo in cui funzionano le cose.

Answer 2

questo link è principalmente su z-index, ma IMO si fa un buon lavoro di spiegare come le cose sono posizionati su una pagina

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

Questo collegamento è più focalizzato sul posizionamento, ma è importante capire l'asse z al fine di comprendere il resto del puzzle posizionamento

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

Answer 3

avete verificato questo grande libro? http://shop.oreilly.com/product/9781565926226.do

sto scherzando.

Non penso che sia necessaria un'intera risorsa dedicata a questa domanda. È piuttosto semplice una volta che fa clic.

Pensa al posizionamento dei CSS come modo per posizionare gli oggetti relativamente a loro stessi (ovunque cadano sulla pagina) o assolutamente da una coordinata X/Y.

È possibile posizionare qualcosa relativo e si sposterà verso l'alto o verso destra con un numero positivo, o verso il basso e verso sinistra con un numero negativo.

Se posizionate un elemento in modo assoluto, esso rimuoverà completamente dal layout (gli altri elementi non lo riconosceranno come sullo schermo) e quindi eseguirà una di queste due cose. Sarà:

1 - posizionarsi dalla parte superiore sinistra della pagina e andare su/giù destra/sinistra come ho detto prima a seconda che i numeri siano +/-.

2- se l'elemento PARENT è posizionato absolute o relative, si posizionerà dall'angolo in alto a sinistra dell'elemento padre, NON dalla finestra del browser.

Pensa a z-index come livelli in Photoshop. Con 0 in basso (e i browser più recenti riconoscono l'indice z negativo per un divertimento ancora maggiore). e 100 come la parte superiore più tardi (i nuovi browser riconoscono una quantità infinita di numeri). Il z-index funziona solo con posizione: relative e absolute.

Quindi, se mi posiziono qualcosa di assoluto, e succede a cadere sotto un altro elemento, posso dargli z-index: 100 e si posizionerà sulla parte superiore. Tieni presente che l'elemento stesso è un rettangolo e che l'altezza/larghezza dell'elemento può impedirti di fare clic sull'elemento sottostante. Non puoi fare angoli, cerchi, ecc. Con puro CSS.

Questo aiuto?

Answer 4

posizionamento è facile da capire:

relative posizionamento - il rendering della pagina esattamente come farebbe normalmente. Una volta terminato, tutto con il posizionamento relative viene spostato, relativo a dove inizialmente era. Nient'altro è interessato.

absolute posizionamento - Rimuove l'elemento dal flusso della pagina. Altre cose rendono come se non ci fossero, cioè riempiono lo spazio occupato da questo oggetto. Ora sono posizionati assolutamente nell'elemento più vicino con position: relative o position: absolute impostato. In molti casi ciò significa che sono posizionati in modo assoluto rispetto al tag body.

Si posiziona quindi le cose con top, right, bottom e left in CSS.

Se qualcosa ha absolute posizionamento serie:

• posizionato rispetto alla alto a sinistra della pagina quando utilizza top e left. Posizionato rispetto a in basso a destra della pagina quando si utilizza bottom e right.

• la sua larghezza/altezza può essere controllata con una combinazione di top/bottom o left/right, ad esempio: top: 100px; bottom: 100px farà un elemento che è 100% - 200px dell'altezza del suo genitore (a meno che non si specifica un'altezza troppo, nel qual caso è abituati top e height e bottom viene ignorato).

Answer 5

C'è di più per il posizionamento che solo la proprietà di posizione. Devi capire anche come funzionano i float.

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/

Questi due articoli dovrebbe farti andare.

Leggere un po 'anche sulle proprietà del display, poiché è probabile che siano una delle aree problematiche in un dato html/css.

Answer 6

Questi due corsi da codice accademia dovrebbero spiegare posizionamento CSS bene:

First, Second.