391 Shares 2999 views

Posizione relativa – che cos'è? descrizione dettagliata

Nesting HTML – un processo lungo, rigoroso, ma molto creativo. Nonostante il fatto che per la maggior parte delle persone impiegate nel settore IT, layout di pagine web può sembrare noiosa routine, specialisti che hanno una vocazione per un caso del genere, non solo qualitativamente svolgere il compito, ma ricevono anche dal processo di piacere tangibile.

Tuttavia, prima di diventare un codificatore con esperienza, ogni nuovo arrivato spende un sacco di tempo a studiare le varie istruzioni e le specifiche sia del linguaggio HTML, e il suo alleato – CSS. Chi esattamente quello che i CSS, che cosa è e che cosa "orecchie Feint" permette di alzarsi, così come una delle sue proprietà top – Posizione relativa – oggi parleremo.

Cosa sono i CSS?

Abbreviazione CSS può essere trascritto e tradotto in russo come "fogli di stile CSS". Suona abbastanza strano – da un lato, sembra chiaro, e le parole, e dall'altro – il significato generale non viene immediatamente catturato. Cominciamo con il semplice – con stile. Questa tecnologia consente di collegare gli oggetti sulla pagina, determinate caratteristiche per quanto riguarda l'aspetto che si può registrarsi una sola volta e utilizzare un numero infinito di volte.

La parola "tavolo" nella traduzione ufficiale è apparso quasi per caso – in realtà più appropriato qui sarebbe quella di utilizzare la parola "liste" o "liste", invece della traduzione originale gli autori hanno deciso che il CSS assomiglia più di una lista, e chi siamo noi tale è ora di provarli.

Infine, la parola "Cascade". Il fatto è che ciascun elemento può avere diversi stili che possono essere mescolati o addirittura si sovrappongono. In questi casi, il browser deve ricorrere a un insieme di regole, al fine di comporre l'aspetto del blocco, che si rivelò essere diversi stili, con uno di loro, per esempio, ha una proprietà relativa posizione, e l'altro – posizione assoluta. Infatti, tali conflitti non possono essere tollerate, ma in grandi progetti tale confusione accade abbastanza spesso.

Così ora, quando tutto è chiaro dal nome, diamo un'occhiata a un semplice esempio. Diciamo che il tuo sito dovrebbe essere un gran numero di pulsanti, progettato in un certo modo. Essi hanno proprietà quali dimensione, opacità, colore. Naturalmente, è possibile specificare tali parametri, la creazione di ogni pulsante, ma è molto più facile da usare i CSS. In pratica, è necessario per descrivere una certa classe, che elenca i valori di tutte le proprietà di cui sopra, e poi, invece di una lunga lista, il tag di ogni pulsante solo bisogno di specificare il nome della classe, poi il browser stesso colorerà questi elementi nel colore desiderato e dare loro un adeguato "gloss".

Che cosa significa la proprietà Position?

Passiamo ora direttamente alla posizione di proprietà, per il bene di che è stato avviato l'intero articolo. Se si ha familiarità con la lingua inglese, o hanno una buona intuizione, allora si dovrebbe essere già chiaro – questa proprietà è responsabile per la posizione della voce. In realtà, il modo in cui è, ma invece di determinare la posizione specifica, questa proprietà dice al browser come dovrebbe essere collocato uno o un altro elemento rispetto alla adiacente o attraverso la pagina nel suo complesso.

Quali valori può la proprietà Position?

La nostra struttura può assumere molti valori diversi, ci sono solo cinque. Ecco una breve descrizione di ciascuno:

  • Posizione Eredita. Questa funzione consente di copiare i dati sulla posizione del l'elemento che è un genitore. Ad esempio, se si dispone di un div con un parente di posizione specificato, stipulato con IMG valore ereditare anche sarà impostato relativo.
  • Posizione statica. Questo valore viene dato a tutti gli elementi automaticamente, salvo più. Gli elementi entrano in posizione come indicato nel codice e non sono disponibili per una varietà di "fronzoli", che permette di cambiare la loro posizione.
  • Posizione assoluta. Con questo valore la proprietà Posizione è molto spesso utilizzato nei casi in cui è necessario per creare un elemento "fluttuante". Con un dato valore della voce proprietà è "invisibile" per gli altri componenti della pagina. Cioè, essi sono disposti come se il nostro elemento di assoluta non esiste. Egli stesso sarà sempre al suo posto, a prescindere da come stato di gran lunga scorrere pagina.
  • Posizione fissa. In molti modi, questo valore è simile a quello precedente, tuttavia, mentre l'elemento assoluto è legato al genitore, fisso utilizza solo le coordinate dell'angolo superiore sinistro della schermata del browser, ignorando il resto degli elementi che lo hanno preceduto.
  • Infine, la posizione relativa. Questo tipo di valori permette elemento di posizionamento rispetto all'altra, che può essere utile per creare un adattativo marcatura chiamato "gomma" comune. Con questa proprietà, l'articolo sarà "spingere" l'altro, senza perdere la capacità di cambiare la loro posizione sulla pagina.

Lavorare con la posizione in diversi browser

Non tutti i browser sono ugualmente compatibili. Mentre la maggior parte dei programmi alternativi per la navigazione in Internet senza intoppi valore della posizione percepita è assolutamente vero, "cronicamente speciale» Internet Explorer considera la proprietà, a seconda della sua versione.

Ad esempio, utilizzando il già "sepolto" il browser IE6, non è possibile utilizzare il valore fisso e Eredita – "asino" semplicemente l'ignorano. Tuttavia, nonostante il fatto che la settima versione della situazione cominciò a migliorare, e fisso già elaborate, a Eredita amata "del browser per scaricare altri browser," ha raggiunto solo nella sua ottava incarnazione.

Il resto degli osservatori tranquillamente gestire posizione con la prima versione, con l'eccezione di Opera, che ha ottenuto l'appoggio delle proprietà nelle sue 4 varianti, pubblicato a metà degli anni '90.

Lavorare con la posizione in Javascript

In realtà, la storia di come lavorare con la proprietà Posizione in Javascript è, abbiamo incluso solo per il bene di decenza. Poiché questa proprietà non ha i caratteri speciali nel titolo, è possibile utilizzare la JS, senza alcuna modifica, ad esempio, per impostare la posizione div relativa, dovrebbe includere una linea come questa: div.style.position = 'relativa'.

Come si può vedere, è abbastanza semplice.

Per cui la posizione merita relativi speciale attenzione?

Mentre la maggior parte dei valori delle proprietà di posizione, per usare un eufemismo, "sputato" sugli elementi circostanti, utilizzando il valore "posizione di stile: relative", dovrebbe sempre ricordare a proposito l'intera pagina nel suo insieme, perché l'uso improprio può fortemente "skew" l'intero contenuto dello schermo .

In Inoltre, la struttura consente solo di convertire facilmente adattabile disegno fisso, in quanto la sua applicazione avrà effetto automaticamente tutte le pagine di contenuti. Poi abbiamo ancora tempo di prendere in considerazione gli esempi e gli errori che utilizzano questo valore, e si vedrà il suo significato tangibile nella pratica.

Quando si dovrebbe utilizzare il posizionamento relativo?

Oltre al layout convenzionale di pagine HTML, Posizione relativa spesso utilizzato per creare una varietà di effetti interessanti. Ad esempio, se si desidera che un elemento "è venuto" su una pagina o, al contrario, a poco a poco è andato al di là del suo territorio, è proprio questa proprietà può aiutare a implementare questo "trucco".

Questi "trucchi" sono attuate tramite JavaScript è, o, se si mira per l'imposizione progressiva, attraverso le proprietà di CSS3, che consentono di regolare la variazione congiunturale del valore di una particolare variabile.

Inoltre, in alcuni casi possibili per creare valori "ibridi" Posizione relativa. CSS, anche se non allo stesso tempo consente di impostare qualcosa come position: relative assoluta, ma utilizzando alcuni trucchi, è ancora possibile per ottenere questo effetto. Questo approccio può essere utile nei casi in cui è necessario creare qualcosa di complesso come un tooltip o menu pop-up. Considerando gli esempi, si darà una descrizione della struttura di un tale "ibrido".

Esempi di utilizzo della relativa graduatoria

Posizione relativa – è piuttosto semplice, ma strumento flessibile che consente di implementare una serie di effetti interessanti. Al fine di non perdere tempo e posto per scrivere modello di codice inutile, presentiamo diversi algoritmi per via orale, che possono decorare vostro sito o pagine specifiche.

Cominciamo con la linea "esaurito". Supponiamo di avere la necessità di un elemento che sarà "viaggio", perché il bordo sinistro dello schermo e lentamente spostarlo sul lato destro. Per attuare tale "meccanismo" dovrebbe impostare position: relative; sinistra: -100px, dove -100 – il numero approssimativo di pixel che costituiscono il blocco di larghezza. Questo stile vi permetterà di nascondere l'unità al di fuori dello schermo, mettendolo in "posizione di partenza". Ora è possibile utilizzare uno script che aumenterà ogni pochi millisecondi a sinistra il valore della proprietà per unità fino a quando non diventa uguale alla larghezza della finestra del browser meno la larghezza dell'elemento. Il risultato è un'unità che esce dal bordo sinistro, rotolato attraverso lo schermo e "parcheggiato" nella mano destra.

Un altro esempio consente di creare elementi "parente-assoluti". Ad esempio, è possibile inserire un assoluto all'interno di un altro, avendo posizione relativa. Come risultato, abbiamo un blocco "relativa" che non ha le dimensioni di cui è incisa l'assoluto, è ora in grado di manifestarsi in una posizione indipendente dell'elemento precedente.

Errori tipici quando si utilizzano Posizione relativa

L'errore più comune quando si utilizza la posizione relativa è che molti web designer dimenticare la possibilità di prenotare un posto nel gruppo, che può essere posizionato ovunque. Ad esempio, se si dispone di un gran, posto all'esterno dello schermo e avente un posizionamento relativo, al suo posto sarà un "buco" a bocca aperta. Tuttavia, anche questa struttura è talvolta crea alcuni inconvenienti possono essere usati per il bene, per esempio, creando un effetto interessante di "auto-assemblaggio" del sito, quando tutti i suoi blocchi vengono gradualmente posti in posizione superiore: 0; a sinistra: 0; t. e. la sua posizione originale.