Příklad absolutního umístění

Za nadpisem jsou ve zdrojovém textu této stránky obsaženy dva vnořené bloky:

<div id="box1">
raz
  <div id="box2">
  dva
  </div>
</div>

Definice vzhledu prvního z nich vypadá následovně:

#box1 {
    position: absolute;
    top: 0; right: 0;
    width: 33%; height: 10em;
    background-color: #FFCC80;
}

Jelikož kolem sebe nemá žádný obsahující blok s nestandardním umístěním, bude se jeho poloha určovat vůči celé stránce. Čili najdete jej vpravo nahoře, jeho šířka je třetinou šířky stránky.

Vzhled vnořeného bloku je definován takto:

#box2 {
    position: absolute;
    bottom: 5px; left: 5px;
    width: 50%; height: 50%;
    background-color: #2B8FD9;
}

Tento blok se ale ve zdrojovém kódu nachází uvnitř absolutně umístěného bloku. To znamená, že poloha i rozměry jsou odvozeny z obalujícího bloku. Proto je umístěn pět pixelů od jeho levého dolního rohu a jeho strany mají proti obalujícímu bloku poloviční délku.

zpět: CSS – absolutní umístění