CSS Lastnost: position

Lastnost position (slo. Položaj) določa vrsto metode pozicioniranja, uporabljene za element (statična, relativna, fiksna, absolutna in lepljiva pozicija). Lastnost določa vrsto metode pozicioniranja, uporabljene za element. Elementi so nato postavljeni z uporabo lastnosti top (slo. Zgoraj), bottom (slo. Spodaj), left (slo. Levo) in right (slo. Desno). Vendar pa te lastnosti ne bodo delovale, če najprej ne nastavimo lastnosti položaja. Delujejo tudi različno glede na vrednost položaja.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>align-self: initial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        .positionRelative {
            position: relative;
            top: 300px;
            left: 30px;
            background-color: lightblue;
        }
        .positionAbsolute {
            position: absolute;
            top: 50px;
            left: 300px;
            background-color: yellow;
            color: #fe5849;
        }
        .positionFixed {
            position: fixed;
            top: 120px;
            left: 120px;
            background-color: orange;
        }
        .positionSticky {
            position: sticky;
            top: 20px;
            left: 200px;
            background-color: red;
            color: #ffeb3b;
        }
        span {
            width: auto;
            padding: 10px;
            border: 1px solid black;
            color: #333333;
        }
    </style>
</head>
<body>
<span class="positionAbsolute">position: absolute;</span>
<span class="positionFixed">position: fixed;</span>
<span class="positionSticky">position: sticky;</span>
<span class="positionRelative">position: relative;</span>
</body>
</html>

REZULTAT

Obstaja pet različnih vrednosti položaja:

absolute (slo. Absolutno)	Dokumenta se premika skupaj s premikanjem spletne strani.	Glej primer
fixed (slo. Fiksno)	Element vedno ostane na istem mestu.	Glej primer
relative (slo. Relativno)	Je nameščen glede na svoj običajni položaj.	Glej primer
static (slo. Statično)	Je privzeto postavljeni statično.	Glej primer
sticky (slo. Lepljivo)	Se postavi glede na položaj drsenja uporabnika po spletni strani.	Glej primer