Prvi ste put ovdje? Pročitajte faq i registrirajte se.
x
  • Registracija
Dobrodošli, ovdje možete postavljati pitanja vezana za problematiku programiranja. Da bi postavili pitanje nije potrebna registracija :)

Pitanja

+5 glasova, 1 odgovor
+6 glasova, +2 odgovora
+3 glasova, 1 odgovor
+4 glasova, 1 odgovor
+7 glasova, +3 odgovora

149 pitanja

181 odgovora

158 komentara

1,755 korisnika

Zadnje značke

Potvrđeni korisnik
TwilaBunning...
Potvrđeni korisnik
ElmoHodson3...
Potvrđeni korisnik
VanitaWoodd5...
Potvrđeni korisnik
RafaelaDurgi...
Potvrđeni korisnik
LenoreFelix4...

CSS apsolutno i relativno pozicioniranje?

+6 glasova

Kako elemente pozicionirati apsolutno i relativno u CSS-u? Koja je razlika između apsolutnog i relativnog?

Upit Velj 13, 2012 anonimno  
   

Odgovor 1

+2 glasova
 
Najbolji odgovor

CSS pozicioniranje

Što se css-a tiče postoje 4 vrste pozicioniranja:

  1. statičko - po "default-u"
  2. apsolutno - pozicioniranje u odnosu na prvi roditeljski elemet koji nije pozicioniran statički
  3. relativno - pozizicioniranje u odnosu na poziciju na kojoj je element kojeg pozicioniramo
  4. fiksno - pozicioniranje u odnosu na prozor preglednika

Ispod je primjer sa relativnim pozicioniranjem. Ako zakomentirate relativno pozicioniranje i otkomentirate apsolutno dobit ćete primjer sa apsolutnim pozicioniranjem a uključeno je još i statičko pozicioniranje. Primjer izgleda ovako:
description

<!doctype html>
<html>
<head>
<title>CSS pozicioniranje</title>
<meta charset="UTF-8" />
<style type="text/css">
div,p{
    margin: 0;
    padding: 0;
}
#wrapper{
    width: 960px;
    margin: 0 auto;
    padding: 30px 0 0 0;
}
#div-0{
    background-color: #dd00dd;
    color: #ffffff;
    /*
    * fiksno pozicionirani element */
    position: fixed;
    top:0;
    width: 100%;
    height: 30px;
}
#div-1{
    background-color: #dddddd;
}
#div-2{
    background-color: #f2f2f2;
    /* 
    * potrebno za apsolutno pozicioniranje za div-2-1, div-2-2 i div-2-3 da bi se apsolutno pozicionirali u odnosu na prvi roditelj koji nije pozicioniran statički a to je baš ovaj
    position: relative;
    height: 300px;
    */
}
#div-2-1{
    background-color: #ff0000;

    /*
    * relativno pozicioniranje */
    float: left;
    width: 200px;

    /* 
    * apsolutno pozicioniranje
    position: absolute;
    top: 0;
    left:0;
    width: 200px;
    */
}
#div-2-2{
    background-color: #00ff00;

    /*
    * relativno pozicioniranje */
    float: left;
    width: 560px;

    /* 
    * apsolutno pozicioniranje
    position: absolute;
    top: 0;
    left:200px;
    width: 560px;
    */
}
#div-2-3{
    background-color: #0000ff;

    /*
    * relativno pozicioniranje */
    float: left;
    width: 200px;

    /* 
    * apsolutno pozicioniranje
    position: absolute;
    top: 0;
    right:0;
    width: 200px;
    */
}
#div-3{
    background-color: #dddddd;
}
/* čišćenje */
.clear{
    clear: both;
}
</style>
</head>
<body>
<div id="div-0">div-0</div>
<div id="wrapper">
    <div id="div-1">
        <p>div-1</p>
    </div>
    <div id="div-2">
        <div id="div-2-1">
            <p>div-2-1</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>           
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>           
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>           
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>           
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>           
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>           
        </div>
        <div id="div-2-2">
            <p>div-2-2</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
        </div>
        <div id="div-2-3">
            <p>div-2-3</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
        </div>
        <!--čišćenje-->
        <div class="clear"></div>
    </div>
    <div id="div-3">
        <p>div-3</p>
    </div>
</div>
</body>
</html>
Odgovoreno Velj 13, 2012 zozzo13 (182)  
Ažurirano Ožu 16, 2012 primjeri