Posicionamento

Testes com a propriedade position.

by estevanmaito

HTML

<div class="posicao absoluta">Absoluta</div>
<div class="posicao fixa">Fixa</div>
<div class="posicao relativa">Relativa</div>
<div class="posicao estatica">Estática</div>

CSS

body {
    height: 700px;
    color: white;
}

.posicao {
    height: 100px;
    width: 100px;
}

.absoluta {
    background-color: red;
    position: absolute;
    top: 20px;
    right: 40px;
}

.fixa {
    background-color: green;
    position: fixed;
    top: 0;
    left: 40px;
}

.relativa {
    background-color: blue;
    position: relative;
    top: 40px;
    left: 120px;
}

.estatica {
    background-color: black;
    position: static;
}