CSS Position (Posizione)

L'attributo position di CSS viene utilizzato per specificare come posizionare un elemento nella pagina, i modi di posizionamento Position (posizionamento) di CSS sono i seguenti: posizionamento statico (static), posizionamento assoluto (absolute), posizionamento relativo (relative), posizionamento fisso (fixed).

Metodi di posizionamento CSS

Il posizionamento degli elementi appropriati nella pagina web è necessario per un design di layout di buona qualità. Ci sono diversi metodi di posizionamento disponibili in CSS. La prossima sezione esplorerà questi metodi di posizionamento uno per uno.

Posizionamento statico (static)

I elementi con posizionamento statico sono sempre posizionati secondo il flusso normale della pagina. Gli elementi HTML sono impostati in posizione statica di default. Gli elementi con posizionamento statico non influenzanosuperiore,inferiore,sinistra,destra, ez-indexCaratteristiche.

Se non è stato specificato il valore dell'attributo position dell'elemento, ossia nel caso di default, l'elemento è posizionato staticamente. Tutti gli oggetti HTML che supportano l'attributo position sono impostati in modo predefinito su static. Static è il valore predefinito dell'attributo position, che indica che il blocco rimane nella posizione originale senza essere ricollocato.
In sostanza, di solito non utilizziamo "position:static" nella nostra vita quotidiana, ma a volte, quando usiamo JavaScript per controllare la posizione degli elementi, se vogliamo che altri elementi con posizionamento diverso diventino posizionamento statico, dobbiamo utilizzare "position:static;" per realizzarlo.

.box {
　　　　padding: 20px;
　　　　background: #7dc765;
}

Posizionamento relativo (relative)

Gli elementi posizionati in modo relativo sono posizionati rispetto alla loro posizione normale.

Nel piano di posizionamento relativo, la posizione del riquadro dell'elemento è calcolata in base al flusso normale. Poi, in base alle proprietà - top o bottom e / o left o right, il riquadro viene spostato dal suo posizionamento normale.

.box {
　　　　position: relative;
　　　　left: 100px;
}

Posizionamento assoluto (absolute)

Gli elementi posizionati in modo assoluto sono posizionati rispetto al primo elemento genitore con posizionamento non statico. Se non si trova tale elemento, viene posizionato rispetto all'angolo in alto a sinistra della finestra del browser. È possibile utilizzare una o più proprietà di spostamento per ulteriori offset del riquadro: top, right, bottom e left.

Gli elementi posizionati in modo assoluto vengono completamente rimossi dal flusso normale, quindi non occupano spazio quando vengono posizionati insieme agli elementi di livello superiore. Tuttavia, a secondaz-indexValore dell'attributo, che può sovrapporsi ad altri elementi. Inoltre, gli elementi posizionati in modo assoluto possono averemarginE non si fondono con altri margini.

.box {
　　　　position: absolute;
　　　　top: 200px;
　　　　left: 100px;
}

Posizionamento fisso (fixed)

La posizionamento fisso è una sottocategoria della posizionamento assoluto.

L'unica differenza è che gli elementi posizionati in modo fisso sono fissi rispetto al punto di vista del browser e non si spostano durante lo scorrimento.

.box {
　　　　position: fixed;
　　　　top: 200px;
　　　　left: 100px;
}