Il posizionamento dell'elemento è la posizione che ricopre l'elemento all'interno della pagina (sistema di coordinate). Una pagina è un sistema di coordinate. L'inizio di questo sistema si trova di default nell'angolo in alto a sinistra della pagina e ha un valore di 0 lungo gli assi X (orizzontale) e Y (verticale).

Sistema di coordinate

Il posizionamento degli elementi viene eseguito anche dal punto in alto a sinistra dell'elemento (angolo superiore sinistro dell'elemento) per impostazione predefinita. Questo punto è la posizione dell'elemento sulla pagina e ha un valore digitale lungo l'asse X e Y.


Lo spostamento di un elemento attraverso la pagina cambierà i valori lungo gli assi X e Y. Possiamo anche cambiare la posizione di riferimento per l'elemento. Ciò significa che possiamo contare la posizione dell'elemento dai bordi:

  • A sinistra (lungo l'asse X, dall'angolo in alto a sinistra del sistema di coordinate, la posizione predefinita dell'elemento).
  • Centro (X).
  • Destra (asse X, dall'angolo destro del sistema di coordinate, pagina).
  • In alto (lungo l'asse Y, dal bordo superiore del sistema di coordinate, la posizione predefinita dell'elemento).
  • Centro (Y).
  • In basso (lungo l'asse Y, dal bordo inferiore del sistema di coordinate, pagina).

Il controllo del posizionamento consente di modificare la posizione degli elementi sulla pagina, sovrapporre un elemento a un altro, determinare la posizione di un elemento rispetto a un altro, regolare le dimensioni di un elemento, correggerlo in un determinato punto.

Il posizionamento di un elemento su una pagina dipende dalle dimensioni dello schermo dai cui l'utente sta visitando la pagina.

Affinché gli elementi vengano visualizzati non appena si posizionano sullo schermo nella pagina dell'editor e non si spostino sulle schermate dell'utente, utilizzare posizioni di elementi diversi lungo gli assi X e Y.

Ad esempio, gli elementi che si trovano sul lato sinistro del sito hanno una posizione lungo l'asse X - a sinistra.

E gli elementi che si trovano sul lato destro del sito hanno una posizione lungo l'asse X - a destra.

Questa disposizione di elementi fissa la loro posizione rispetto ai confini del sito. Questi elementi verranno visualizzati uniformemente sulle diverse schermate utente.

È necessario modificare la posizione dell'elemento Destra - Sinistra e In alto - in basso per ottimizzare la visualizzazione degli elementi per le diverse dimensioni dello schermo degli utenti.

Larghezza schermo

Puoi regolare la larghezza della tua pagina:

  • Auto è la parte visibile del sito per tutte le dimensioni di schermo disponibili.
  • La larghezza massima è la larghezza massima possibile del tuo sito.

Se imposti la larghezza della pagina su "auto" allora tutti gli elementi della pagina si troveranno nell'area visibile dello schermo, indipendentemente dalla larghezza dello schermo sul visitatore. In questo caso, lo spostamento degli elementi rispetto ai confini del sito sarà ridotto.

Se imposti la larghezza dello schermo "larghezza completa" allora gli elementi che si trovano ai bordi del sito si sposteranno oltre l'area visibile di quei visitatori che hanno uno schermo di piccole dimensioni (e questo non è consigliato).

Ti consigliamo di utilizzare sempre la larghezza "auto" in modo che tutti gli elementi della pagina siano visibili ai visitatori.

Pixel e percentuali

È possibile inserire manualmente la posizione di un elemento lungo gli assi X e Y. Esistono due valori possibili: pixel e percentuali. Puoi utilizzare qualsiasi opzione che ti si addice di più.

Pixel. imposta il numero di pixel lungo gli assi X e Y per esporre gli elementi della pagina in modo più accurato rispetto ai bordi o ad altri elementi.

Ad esempio, si imposta il valore di 100 pixel lungo l'asse X per un elemento icona e si desidera che il testo accanto all'icona sia sfalsato di 100 pixel dall'icona. Per garantire che le posizioni di questi due elementi rimangano proporzionate l'una rispetto all'altra, impostare il valore manualmente.

Puoi cambiare la posizione di un elemento spostandolo con il mouse sulla pagina. Ma con l'aiuto dei pixel puoi impostarlo in modo più accurato.

Per spostare un oggetto, usa le frecce sulla tastiera. Facendo clic sulla freccia si sposta l'elemento di 1 pixel. Pertanto, è possibile regolare in modo più preciso la posizione dell'elemento sul sito rispetto ad altri elementi o bordi. Se tieni premuto il tasto "shift", lo spostamento diventerà di 10 pixel. Seleziona un oggetto, tieni premuto sulla tastiera "shift" e la freccia "su-giù", "destra-sinistra". L'elemento si sposterà di 10 pixel nella direzione selezionata.

Posizione. Puoi anche specificare la posizione dell'elemento in percentuale. Nel campo X o Y, inserisci il numero e il segno di percentuale "%". L'elemento si trova lungo l'asse in modo tale che il 100% sia l'intera larghezza della pagina o l'intera altezza della pagina e l'elemento si trovi nella parte corrispondente alla percentuale da te selezionata della pagina. Ad esempio, se impostiamo il 50%, l'elemento si trova esattamente nel mezzo della larghezza (o altezza) dell'angolo in alto a sinistra (se il conteggio è a sinistra).

Elemento di base

Il posizionamento di un elemento su una pagina deriva dai bordi dell'elemento di base, ovvero l'elemento all'interno del quale si trova un altro elemento. Quando aggiungi elementi di testo, icona, titolo, immagine, l'elemento di base è la sezione della pagina.

Se si raggruppano elementi o si aggiunge un modulo, il documento principale non sarà una sezione, ma un gruppo e un modulo. Ci saranno diversi elementi all'interno del gruppo e diversi elementi all'interno del modulo (titolo, campi di testo, pulsante, ecc).

Seleziona il gruppo premendo il tasto sinistro del mouse per cambiare gli elementi all'interno dell'elemento di base. Puoi muoverli, spostarli da un elemento di base ad un altro posto, copiarli ed eliminarli. Se l'elemento di base non è selezionato, l'intero gruppo di elementi (l'intero modulo) verrà spostato.