CSS Lastnost: left

Lastnost left (slo. Levo) vpliva na vodoravni položaj pozicioniranega elementa. Ta lastnost ne vpliva na nepozicionirane elemente. Položaja levo nima učinka v primeru, če uporabimo position: static. V vseh drugih položajih se element postavi levo oz. kot ga nastavimo sami. V našem primeru bomo sliko postavili na sredino zaslona, in pri tem uporabili še lastnost top.

PRIMER

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

    <style>
        * {
            box-sizing: border-box;
        }
        div.main {
            position: relative;
            height: 600px;
            border: 1px solid black;
            background: lightblue;
            color: #333333;
        }
        div.absolute {
            position: absolute;
            width: 75%;
            top: 50px;
            left: 25px;
            padding: 10px;
            border: 1px solid red;
        }
        div.fixed {
            position: fixed;
            width: 75%;
            top: 200px;
            left: 50px;
            padding: 10px;
            border: 1px solid greenyellow;
        }
        div.relative {
            position: relative;
            width: 75%;
            top: 300px;
            left: 0;
            padding: 10px;
            border: 1px solid blue;
        }
        div.sticky {
            position: sticky;
            width: 75%;
            top: 500px;
            left: 50px;
            padding: 10px;
            border: 1px solid yellow;
        }
        div.parent {
            position: fixed;
            width: 75%;
            height: 80px;
            top: 400px;
            left: 50px;
            padding: 10px;
            border: 1px solid greenyellow;
        }
        div.inherit {
            position: inherit;
        }
        div.initial {
            position: initial;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="absolute">position: absolute;<br>top: 50px;<br>left: 25px;</div>
    <div class="fixed">position: fixed;<br>top: 200px;<br>left: 50px;</div>
    <div class="relative">position: relative;<br>top: 300px;<br>left: 250px;</div>
    <div class="sticky">position: sticky;<br>top: 500px;<br>left: 300px;</div>

    <div class="parent">
        <div class="inherit">position: inherit;<br>top: 400px;<br>left: 50px;</div>
    </div>

    <div class="initial">position: initial;</div>
</div>
</body>
</html>

REZULTAT

Vrednost	Opis
auto	Brskalniku omogoči, da izračuna položaj levega roba.
dedovanje	Podeduje to lastnost od nadrejenega elementa.
privzeta vrednost	Nastavi lastnost na privzeto vrednost.
dolžina	Nastavi položaj levega roba v px, cm itn. Negativne vrednosti so dovoljene.
odstotki	Nastavi položaj levega roba v odstotkih vsebovanega elementa. Dovoljene so negativne vrednosti.