Il posizionamento degli elementi all'interno della pagina può essere modificato per adattare un elemento alle nostre necessità.
Di default il posizionamento che viene applicato è chiamato static e non applica particolari effetti: l'elemento sarà visualizzato dove è posizionato.

.myElement {
  position: static;
}

Un particolare tipo di posizionamento è quello relativo, che unito alle proprietà di posizionamento top/bottom/left/right (e solo in presenza di queste ultime) consente di definire un posizionamento relativo rispetto al contenitore: nell'esempio andremo a tirare l'elemento in alto di 30px e a sinistra di 50px riseptto al suo contenitore (sovrapponendosi, di fatto).

.myElement {
  position: relative;
  top: -30px;
  left: -50px;
}

Da questo punto di vista, possiamo anche posizionare in maniera assoluta gli elementi tramite absolute. In questo caso, il posizionamento sarà assoluto rispetto al primo elemento padre nell'albero dei controlli che non sia stato posizionato a propria volta (eventualmente il tag body, se non ce ne sono). Nell'esempio che segue avremo un elemento posizionato in cima alla pagina distante 30 pixel dall'alto e 50 dalla sinistra, che segue lo scrolling della pagina.

.myElement {
  position: absolute;
  top: 30px;
  left: 50px;
}

Infine, possiamo posizionare un elemento in maniera assoluta e non farlo scrollare con la pagina specificando il valore fixed: nell'esempio andremo a posizionare un elemento in basso a destra, a 50px di distanza, che resterà sempre in quella posizione anche durante lo scrolling.

.myElement {
  position: fixed;
  bottom: 50px;
  right: 50px;
}