۝ OraWeb.it ۝ position

CSS position

La proprietà CSS3 position definisce il tipo di posizionamento di un elemento

La proprietà position in CSS3 controlla come un elemento è posizionato nel documento. I valori più comuni includono static, relative, absolute, fixed e sticky, ciascuno con un comportamento diverso rispetto al flusso del layout e agli offset (top, right, bottom, left).

HOSTING • VPS • DEDICATED SERVER • HOUSING • SSL • PEC • CLOUD • DOMAIN

Sintassi

position: static | relative | absolute | fixed | sticky;

Significato dei valori principali:

static: valore predefinito; l’elemento segue il normale flusso del documento.
relative: l’elemento è posizionato relativamente alla sua posizione originale. Le proprietà top, right, bottom, left possono spostarlo.
absolute: l’elemento viene rimosso dal flusso normale e posizionato relativamente al primo antenato con position diversa da static.
fixed: l’elemento è posizionato rispetto alla finestra del browser e non si muove quando si scorre la pagina.
sticky: una via di mezzo tra relative e fixed; l’elemento si comporta come relative finché non viene raggiunta una soglia definita, poi diventa fixed.

Esempio proprietà: position

Codice Esempio: position

CODE: CSS preleva codice

```
.static-box {
```
```
  position: static;
```
```
  background-color: #d3d3d3;
```
```
  padding: 10px;
```
```
  margin-bottom: 10px;
```
```
}
```
```
 
```
```
.relative-box {
```
```
  position: relative;
```
```
  top: 10px;
```
```
  left: 20px;
```
```
  background-color: #a1c4fd;
```
```
  padding: 10px;
```
```
  margin-bottom: 10px;
```
```
}
```
```
 
```
```
.absolute-container {
```
```
  position: relative;
```
```
  height: 150px;
```
```
  background-color: #f0e68c;
```
```
  margin-bottom: 10px;
```
```
}
```
```
 
```
```
.absolute-box {
```
```
  position: absolute;
```
```
  top: 20px;
```
```
  right: 20px;
```
```
  background-color: #f08080;
```
```
  padding: 10px;
```
```
}
```
```
 
```
```
.fixed-box {
```
```
  position: fixed;
```
```
  bottom: 10px;
```
```
  right: 10px;
```
```
  background-color: #98fb98;
```
```
  padding: 10px;
```
```
  z-index: 1000;
```
```
}
```
```
 
```
```
.sticky-box {
```
```
  position: sticky;
```
```
  top: 0;
```
```
  background-color: #dda0dd;
```
```
  padding: 10px;
```
```
  z-index: 1;
```
```
}
```

Contenuto Esempio: position

HTML e CSS completo per l'esempio:


<style>
  .static-box {
    position: static;
    background-color: #d3d3d3;
    padding: 10px;
    margin-bottom: 10px;
  }

  .relative-box {
    position: relative;
    top: 10px;
    left: 20px;
    background-color: #a1c4fd;
    padding: 10px;
    margin-bottom: 10px;
  }

  .absolute-container {
    position: relative;
    height: 150px;
    background-color: #f0e68c;
    margin-bottom: 10px;
  }

  .absolute-box {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #f08080;
    padding: 10px;
  }

  .fixed-box {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color: #98fb98;
    padding: 10px;
    z-index: 1000;
  }

  .sticky-box {
    position: sticky;
    top: 0;
    background-color: #dda0dd;
    padding: 10px;
    z-index: 1;
  }
</style>

<div class="static-box">Posizione Static (default)</div>
<div class="relative-box">Posizione Relative</div>
<div class="absolute-container">
  <div class="absolute-box">Posizione Absolute</div>
</div>
<div class="sticky-box">Posizione Sticky (scorri per vedere l'effetto)</div>
<div style="height: 800px;">Contenuto lungo per testare lo scroll...</div>
<div class="fixed-box">Posizione Fixed (sempre visibile)</div>

Prova questo esempio

DEMO

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

CSS position

La proprietà CSS3 position definisce il tipo di posizionamento di un elemento

Sintassi

Significato dei valori principali:

Esempio proprietà: position

HTML e CSS completo per l'esempio:

Supporto Browser

Follow us

Quick Links

Information

Contact Information