CSS3 - Pozicija


CSS metode pozicioniranja

Prikladno pozicioniranje elemenata na web stranicama je neophodno za dobar dizajn izgleda. U CSS-u postoji nekoliko metoda koje možete koristiti za pozicioniranje elemenata. Sljedeći dio opisaće vam ove metode pozicioniranja jednu po jednu.



Statičko pozicioniranje

Statički pozicionirani element uvijek se postavlja u skladu s normalnim protokom stranice. HTML elementi su prema zadanim postavkama postavljeni statično. Statički pozicionirani elementi ne utiču na svojstva: top, bottom, left, right i z-index.

.box {
    padding: 20px;
    background: #7dc765;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS statičkog pozicioniranja</title>
<style>
    .box{
        color: #fff;
        background: #7dc765;
        padding: 20px;
    }
    .container{
        padding: 50px;
        margin: 50px;
        position: relative;
        border: 5px solid black;
        font-family: Arial, sans-serif;
    }
    .container p{
        line-height: 50px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box">
            <h2>Statično pozicionirana box-sa</h2>
            <div><strong>Napomena:</strong> Ovaj je okvir postavljen
            statički, što je zadano. Uvijek se postavlja u skladu s normalnim 
            protokom stranice.</div>
        </div>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
      metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum
      id metus ac nisl bibendum scelerisque non non purus. Suspendisse 
      varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum
      vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
      aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum 
      eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id 
      interdum neque porttitor. Integer faucibus ligula.</p>

      <p>Quis quam ut magna consequat faucibus. Pellentesque 
      eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. 
      Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. 
      Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus 
      auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam 
      vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce 
      quam tortor, commodo ac dui quis, bibendum viverra erat. 
      Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. 
      Curabitur et diam tristique, accumsan nunc eu.</p>
    </div>
</body>
</html>


Relativno pozicioniranje

Relativno pozicionirani element je pozicioniranje u odnosu na svoj normalni položaj. U šemi relativnog pozicioniranja položaj box-sa elementa izračunava se prema normalnom protoku. Tada se box pomiče iz ovog normalnog položaja prema svojstvima top or bottom and/or left ili right.

.box {
    position: relative;
    left: 100px;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS relativnog pozicioniranja</title>
<style>
    .box{
        position: relative;
        left: 100px;
        color: #fff;
        background: #00c4cc;
        padding: 20px;
    }
    .container{
        padding: 50px;
        margin: 50px;
        border: 5px solid black;
        font-family: Arial, sans-serif;
    }
    .container p{
        line-height: 50px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box">
            <h2>Relativno pozicionirana box-sa</h2>
            <div><strong>Napomena:</strong> Lijeva ivica margine ovog
            DIV okvira pomaknuta je udesno za 100px od prvobitnog položaja. 
            Stvoreni razmak je sačuvan.</div>
        </div>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
      metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum
      id metus ac nisl bibendum scelerisque non non purus. Suspendisse
      varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum
      vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
      aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum
      eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id 
      interdum neque porttitor. Integer faucibus ligula.</p>

      <p>Quis quam ut magna consequat faucibus. Pellentesque 
      eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. 
      Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. 
      Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus 
      auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam 
      vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce
      quam tortor, commodo ac dui quis, bibendum viverra erat. 
      Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. 
      Curabitur et diam tristique, accumsan nunc eu.</p>
    </div>
</body>
</html>


Apsolutno pozicioniranje

Apsolutno pozicionirani element pozicioniran je u odnosu na prvi nadređeni element koji ima položaj koji nije statičan. Ako takav element nije pronađen, postaviće se na stranicu u odnosu na 'top-left' ugao prozora pretraživača. Dalji pomaci okvira mogu se navesti pomoću jednog ili više svojstavatop, right, bottom i left.

Apsolutno postavljeni elementi u potpunosti su izvađeni iz normalnog toka i tako ne zauzimaju prostor prilikom postavljanja elemenata. Međutim, može se preklapati s ostalim elementima, zavisno o vrijednosti svojstva z-indeksa. Takođe, apsolutno pozicionirani element može imati margine i one se ne urušavaju ni s jednom marginom.

.box {
    position: absolute;
    top: 200px;
    left: 100px;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS apsolutnog pozicioniranja</title>
<style>
    .box{
        position: absolute;
        top: 200px;
        left: 100px;
        color: #fff;
        width: 60%;
        background: #4cafdf;
        padding: 20px;
    }
    .container{
        padding: 50px;
        margin: 50px;
        position: relative;
        border: 5px solid black;
        font-family: Arial, sans-serif;
    }
    .container p{
        line-height: 50px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box">
            <h2>Apsolutno pozicionirana box-sa</h2>
            <div><strong>Napomena:</strong> Ovaj je okvir apsolutno
            pozicioniran u odnosu na element DIV. To je pomicanje sa 
            stranicom.</div>
        </div>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
      metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum
      id metus ac nisl bibendum scelerisque non non purus. Suspendisse
      varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum
      vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
      aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum
      eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id
      interdum neque porttitor. Integer faucibus ligula.</p>

      <p>Quis quam ut magna consequat faucibus. Pellentesque
      eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. 
      Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. 
      Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus 
      auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam 
      vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce
      quam tortor, commodo ac dui quis, bibendum viverra erat.
      Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. 
      Curabitur et diam tristique, accumsan nunc eu.</p>
    </div>
</body>
</html>


Fiksno pozicioniranje

Fiksno pozicioniranje je potkategorija apsolutnog pozicioniranja. Jedina razlika je u tome što je fiksno pozicionirani element fiksiran u odnosu na prikaznu površinu pretraživača i ne pomiče se kada se pomjera stranica.

.box {
    position: fixed;
    top: 200px;
    left: 100px;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS fiksnog pozicioniranja</title>
<style>
    .box{
        position: fixed;
        top: 200px;
        left: 100px;
        color: #fff;
        width: 60%;
        background: #f44712;
        padding: 20px;
    }
    .container{
        padding: 50px;
        margin: 50px;
        position: relative;
        border: 5px solid black;
        font-family: Arial, sans-serif;
    }
    .container p{
        line-height: 50px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box">
            <h2>Fiksno pozicionirana box-sa</h2>
            <div><strong>Napomena:</strong> Položaj ovoga okvira je 
            fiksiran u odnosu na prikazni okvir dokumenta. Ne pomiče se sa
            stranicom.</div>
        </div>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
      metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum
      id metus ac nisl bibendum scelerisque non non purus. Suspendisse
      varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum
      vestibulum. Vivamus fermentum in arcu in aliquam. Quisque
      aliquam porta odio in fringilla. Vivamus nisl leo, blandit at
      bibendum eu, tristique eget risus. Integer aliquet quam ut elit 
      suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>

      <p>Quis quam ut magna consequat faucibus. Pellentesque
      eget nisi a mi suscipit tincidunt. Ut tempus dictum risus.
      Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. 
      Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus 
      auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam 
      vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce 
      quam tortor, commodo ac dui quis, bibendum viverra erat. 
      Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. 
      Curabitur et diam tristique, accumsan nunc eu.</p>
    </div>
</body>
</html>