Dall'autore: Saluti. Il posizionamento degli elementi CSS è un argomento molto importante nella creazione di siti. In questo articolo, propongo di considerare in modo più dettagliato tutti i modi per spostare i blocchi nella pagina web.
Quali sono i tipi
Se parliamo del posizionamento degli elementi del blocco, allora viene impostato utilizzando la proprietà position. Ha quattro significati e ognuno merita una considerazione separata.
Posizionamento assoluto
Questa è la prima specie conosciuta. È impostato così: posizione: assoluta. Successivamente, il blocco perde le sue proprietà abituali e abbandona completamente il flusso normale. Cos'è questo flusso? Prova a mettere più elementi di blocco in fila nel markup. Come diventeranno? Uno dopo l'altro, e non altrimenti.
Questo è il normale comportamento predefinito dei blocchi. Ma cosa succede a un blocco che ha un posizionamento assoluto definito? Esce completamente dal flusso normale, altri blocchi semplicemente smettono di notarlo, come se non fosse mai esistito, ma l'elemento rimane sulla pagina. Il posizionamento assoluto in CSS viene spesso utilizzato per il posizionamento preciso di elementi decorativi, icone e altri elementi di design.
Ora può essere spostato utilizzando le proprietà sinistra, destra, superiore e inferiore. Per impostazione predefinita, il movimento avviene rispetto ai bordi della finestra del browser, ma se l'elemento padre ha position: relative, allora l'offset si verifica rispetto al blocco padre.
Blocco (posizione: assoluta; fondo: 0; destra: 0;)
Blocco ( posizione: assoluta; in basso: 0; destra: 0; |
L'elemento verrà spostato nell'angolo inferiore destro. Noto che il pulsante in alto viene spesso fatto in questo modo: lo posizionano semplicemente nell'angolo. Ecco un altro esempio, in cui ti mostro prima il possibile markup:
< div id = "wrapper" > < div class = "block" > < / div > < / div > |
E ora gli stili CSS per questo frammento:
#wrapper (posizione: relativa;) .block (posizione: assoluta; in alto: 0; a destra: 10px;)
#involucro ( posizione: relativa; Blocco ( posizione: assoluta; in alto: 0; destra: 10px; |
In questo esempio, abbiamo prima annotato il posizionamento relativo al contenitore padre (relativo - a riguardo - più avanti nell'articolo), quindi impostato il posizionamento assoluto per lo stesso elemento .block. Di conseguenza, le coordinate verranno conteggiate non dalla finestra del browser stessa, ma dai bordi dell'elemento padre, ovvero il blocco wrapper.
Posizionamento relativo di elementi css
Questa è la vista seguente ed è scritta così - position: relative. Le coordinate sono impostate con le stesse proprietà della posizione assoluta. L'unica differenza significativa è che l'elemento non cade formalmente fuori dal flusso: c'è spazio per questo.
Questo valore funziona come visibilità: nascosto, quando l'elemento è nascosto dalla pagina, ma lo spazio sottostante non viene toccato. Lo stesso accade con il posizionamento relativo: il blocco può essere spostato ovunque, ma lo spazio per esso rimane vuoto e le altre parti non lo prenderanno.
È anche importante sapere che l'offset non si verifica dai bordi della finestra del browser Web, ma da dove si trovava originariamente il blocco. Questo è:
Blocco (posizione: relativa; in alto: 10 px; a destra: 50 px;)
Blocco ( posizione: relativa; in alto: 10px; a destra: 50 pixel; |
Il blocco si sposterà di 50 pixel a destra e di 10 pixel a sinistra.
Fissazione
Sicuramente su Internet, hai visto più di una volta sui siti quando, scorrendo, qualche banner non è scomparso, ma ha continuato a essere nella tua zona di visibilità, come se si attaccasse a un posto. Questo viene fatto principalmente utilizzando il posizionamento fisso. Per fare ciò, è necessario scrivere:
Posizione: posizione statica statica o normale
L'ultimo tipo è statico, questo è il comportamento normale degli elementi del blocco. Non è necessario scriverlo, perché è predefinito, ma è comunque necessario conoscere il quarto valore. A volte viene scritto con position: static per annullare un diverso tipo di posizionamento su determinati eventi della pagina web.
Come faccio a posizionare correttamente i blocchi in css?
Abbiamo considerato i significati, ma questo non è sufficiente per chiudere questo argomento a noi stessi. In realtà, è necessario capire dove e quali tipi di posizionamento dovrebbero essere applicati. Ti ho già fornito un esempio con uno fisso: puoi usarlo per creare barre laterali, intestazioni o piè di pagina appiccicosi.
Il posizionamento relativo può essere d'aiuto quando è necessario spostare leggermente un blocco rispetto alla sua posizione e mantenerlo comunque nel flusso. È anche impostato sui blocchi padre per utilizzare il movimento assoluto per i bambini.
Altri trucchi: centratura, blocchi flottanti
La proprietà position non risolve tutti i problemi con la disposizione degli elementi del blocco. Come creeresti, ad esempio, una griglia del sito utilizzandola? Non ho buone idee. Qui altre proprietà vengono in soccorso.
Le griglie sono spesso realizzate utilizzando float in css. La proprietà ti consente di spingere il blocco sul bordo sinistro o destro del genitore (float: left, float: right), consentendo a diversi elementi di blocco di diventare in una riga, cosa comune a qualsiasi sito.
La centratura viene eseguita in questo modo: il blocco deve scrivere una certa larghezza, quindi impostare il margine della proprietà: 0 su auto. È il valore automatico che lo allineerà orizzontalmente esattamente al centro. Naturalmente, per questo deve essere l'unico della sua linea, altrimenti non funzionerà nulla.
Tutti i tipi di posizionamento elencati in questo articolo possono essere utili per uno sviluppatore web. Da qualche parte l'icona deve essere inserita (posizione: assoluta), da qualche parte, la posizione del blocco dovrebbe essere leggermente corretta, lasciando il posto dietro di essa (posizione: relativa) e dove il widget dovrebbe essere fissato (posizione: fisso). In generale, la conoscenza di questa proprietà non sarà sicuramente superflua.
Bene, per imparare ancora di più dal mondo della costruzione di siti, assicurati di iscriverti al nostro blog e ricevere nuovi materiali di formazione. E ti consiglio anche di dare un'occhiata al nostro, dove viene sollevato anche un argomento simile. (posizionamento articolo)
Vlad Merzhevich
Il posizionamento si riferisce alla posizione di un elemento in un sistema di coordinate. Esistono quattro tipi di posizionamento: normale, assoluto, fisso e relativo. A seconda del tipo, che viene impostato tramite la proprietà position, cambia anche il sistema di coordinate.
Grazie alla combinazione delle proprietà position, left, top, right e bottom, un elemento può essere sovrapposto l'uno all'altro, visualizzato in un punto con determinate coordinate, fissato in un luogo determinato, determinare la posizione di un elemento rispetto a un altro, ecc. Come altre proprietà CSS, il controllo del posizionamento è disponibile tramite script. Così, puoi cambiare dinamicamente la posizione degli elementi senza ricaricare la pagina, creando animazioni e vari effetti.
Posizionamento normale
Se la proprietà position non è impostata per un elemento o è statica, l'elemento viene visualizzato come di consueto nel flusso del documento. In altre parole, gli elementi vengono visualizzati nella pagina nell'ordine in cui appaiono nel sorgente HTML.
Le proprietà left, top, right, bottom, se specificate, vengono ignorate.
Posizionamento assoluto
Con il posizionamento assoluto, l'elemento non esiste nel flusso del documento e la sua posizione è relativa ai bordi del browser. È possibile impostare questo tipo tramite il valore assoluto della proprietà position. Vengono specificate le coordinate relative ai bordi della finestra del browser, denominata "area visibile" (Fig. 3.42).
Riso. 3.42. Valori delle proprietà sinistro, destro, superiore e inferiore quando posizionato su assoluto
La modalità ha le seguenti caratteristiche.
- La larghezza del livello, se non impostata in modo esplicito, è la larghezza del contenuto più i valori di margine, bordo e spaziatura interna.
- Un livello non cambia la sua posizione originale se non ha le proprietà destra, sinistra, superiore e inferiore.
- Le proprietà left e top hanno la precedenza sulle proprietà right e bottom. Se sinistra e destra si contraddicono, il valore di destra viene ignorato. Lo stesso vale per il fondo.
- Se left è impostato su un valore negativo, il livello andrà oltre il bordo sinistro del browser e la barra di scorrimento non verrà visualizzata. Questo è un modo per nascondere un elemento dalla vista. Lo stesso vale per la proprietà superiore, solo il livello andrà oltre il bordo superiore.
- Se left è impostato su un valore maggiore della larghezza dell'area visualizzabile o se right è specificato con un valore negativo, viene visualizzata una barra di scorrimento orizzontale. Una regola simile funziona con top, interessa solo la barra di scorrimento verticale.
- Contemporaneamente, le proprietà sinistra e destra specificate formano la larghezza del livello, ma solo se la larghezza non è specificata. Aggiungi la proprietà width e il valore corretto verrà ignorato. Lo stesso accadrà con l'altezza del livello, solo le proprietà superiore, inferiore e altezza sono già coinvolte.
- Un elemento posizionato in modo assoluto si sposta con il documento mentre scorre.
La proprietà position impostata su assoluto può essere utilizzata per creare un effetto cornice. Oltre al posizionamento assoluto, agli elementi deve essere assegnata la proprietà overflow con il valore auto. Quindi, quando il contenuto supera l'altezza dell'area visibile, apparirà una barra di scorrimento. L'altezza e la larghezza dei "frame" vengono generate automaticamente utilizzando contemporaneamente le proprietà left, right per la larghezza e top, bottom per l'altezza (esempio 3.31).
Esempio 3.31. Creare un analogo di frame
Pilaf dei popoli del mondo
pilaf . di Fergana
Mettere la carne tagliata a pezzi in un calderone e friggerla fino a formare una crosticina. Soffriggere la cipolla tagliata ad anelli insieme alla carne fino a farla diventare rossastra, quindi aggiungere le carote tagliate a listarelle. Aggiungere metà del sale, mescolare il tutto e friggere finché le carote non saranno dorate. Successivamente, versare metà della quantità d'acqua richiesta e far bollire.
Coprire il riso con uno strato uniforme, aumentare la fiamma e versare subito dell'acqua in modo che copra il riso di 1–1,5 cm.Appena l'acqua evapora, raccogliere il pilaf con un piano, andato a fondo. Quindi coprire il pilaf e lasciarlo riposare per 20-25 minuti.
Mescolare accuratamente il pilaf finito, trasferirlo in un piatto grande, distribuire sopra la carne.
Il risultato di questo esempio è mostrato in Fig. 3.43. Il livello dell'intestazione viene visualizzato nel flusso come di consueto e la barra laterale e i livelli del contenuto sono impostati sul posizionamento assoluto.
Riso. 3.43. Applicazione del posizionamento assoluto
In IE6, gli elementi posizionati in modo assoluto non possono essere impostati contemporaneamente sulle proprietà sinistra, destra e superiore e inferiore.
Il posizionamento assoluto viene utilizzato anche per creare vari effetti, come i suggerimenti per le foto. Al contrario dell'attributo title del tag che visualizza anche il testo del tooltip, tramite gli stili è possibile controllare l'aspetto del testo visualizzato tramite lo script.
Per prima cosa, creiamo un livello vuoto con l'ID floatTip e definiamo il suo stile. Devono essere richieste tre proprietà di stile: posizione con il valore assoluto, visualizzazione con il valore nessuno nasconde il livello e larghezza imposta la larghezza del livello suggerimento. Il resto delle proprietà viene utilizzato su richiesta dello sviluppatore e ha lo scopo di modificare l'aspetto del livello (esempio 3.32).
Esempio 3.32. Stile descrizione comandi
#floatTip (posizione: assoluta; / * Posizionamento assoluto * / larghezza: 250 px; / * Larghezza blocco * / display: nessuno; / * Nascondi dal display * / bordo: 1 px solido # 000; / * Opzioni cornice * / padding: 5 px ; / * Margini intorno al testo * / font-family: sans-serif; / * Sliced font * / font-size: 9pt; / * Font size * / color: # 333; / * Text color * / background: # ECF5E4; /* Colore di sfondo */ )
Lo script stesso è costituito da due funzioni: moveTip () tiene traccia del movimento del mouse e cambia la posizione del livello in base alle coordinate del cursore e toolTip () controlla la visibilità del livello e visualizza il testo desiderato al suo interno (esempio 3.33).
Esempio 3.33. Script per l'output dei livelli
Document.onmousemove = moveTip; function moveTip (e) (floatTipStyle = document.getElementById ("floatTip"). style; w = 250; // Larghezza livello // Per browser IE if (document.all) (x = event.x + document.body.scrollLeft ; y = event.y + document.body.scrollTop; // Per altri browser) else (x = e.pageX; // coordinata X del cursore y = e.pageY; // coordinata Y del cursore) // Mostra livello a destra del cursore if ((x + w + 10)< document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; floatTipStyle.display = "block"; // Показываем слой } else { floatTipStyle.display = "none"; // Прячем слой } }
Per comodità e versatilità, lo script dovrebbe essere posizionato in un file separato e connesso tramite l'attributo src del tag
Obiettivo "+": Canon EF 24-105 f/4L IS USM
Flash "+": Canon Speedlite 580 EX
"+" Esposizione: 1/125
Apertura: 5.6 ")" onmouseout = "toolTip ()" />