Pozicování

Teorie

Pozicování v CSS je proces, kterým určujeme, kde se prvek na stránce nachází.
static základní pozice
relative posun vůči původnímu umístění
absolute posun vůči nejbližšímu pozicovanému rodiči
fixed zůstává vždy na stejném místě

Kód

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <style>
        body{
            background-color: rgb(255, 255, 255);
            font-size: 25px;
            min-height: 100vh;
        }

.box1{
            width: 100px;
            height: 100px;
            background-color: rgb(238, 255, 0);
            position: relative;
            top: 50px;
            left: 50px;
        }

.box2{
            width: 100px;
            height: 100px;
            background-color: rgb(152, 190, 135);
            position: absolute;
            top: 50px;
            right: 50px;
        }

.box3{
            width: 100px;
            height: 100px;
            background-color: rgb(145, 74, 187);
            position: fixed;
            top: 500px;
            left: 50px;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum magnam cum, voluptatum nihil ea at repudiandae. Minus a sit voluptates vitae distinctio quos doloremque, tempora cupiditate saepe, amet exercitationem dicta?</p>
    <div class="box1">relative</div>
    <div class="box2">absolute</div>
    <div class="box3">fixed</div>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero beatae, ipsam dolorem accusamus dolore veniam doloremque laborum ab eaque alias magnam ratione, voluptatum obcaecati nobis animi odio, mollitia fugiat! Rerum.</p>
</body>
</html>

Výsledek

pokračovat