Posicionando os elementos
Elemento 1
Elemento 2
Elemento 3
Elemento A
Elemento B
Elemento C
.inline {display: inline-block;} .exemplo { width: fit-content; min-height: 50px; margin: 10px; padding: 10px; border-radius: 4px; } #elemento-1 {background-color: orange;} #elemento-2 { background-color: palevioletred; position: relative; top: -30px; } #elemento-3 { background-color: palegreen; position: sticky; top: 80px; } #elemento-4 { background-color: paleturquoise; position: absolute; opacity: 0.7; } #elemento-5 { background-color: violet; position: fixed; right: 120px; opacity: 0.5; } #elemento-6 {background-color: blueviolet;}
<div id="elemento-1" class="exemplo inline"> Elemento 1 <br> <code> position:static;</code> </div> <div id="elemento-2" class="exemplo inline"> Elemento 2 <br> <code> position:relative;</code> </div> <div id="elemento-3" class="exemplo inline"> Elemento 3 <br> <code> position:sticky;</code> </div> <hr> <div id="elemento-4" class="exemplo"> Elemento A <br> <code> position:absolute;</code> </div> <div id="elemento-5" class="exemplo"> Elemento B <br> <code> position:fixed;</code> </div> <div id="elemento-6" class="exemplo"> Elemento C </div>