div absolute e relative

**mld** · 12-02-2009, 18:52

E' lo stesso esempio, prima col posizionamento assoluto e poi relativo.

codice:

<html>
<head><title>prova div con position relative</title></head>
<style type="text/css">
#a { position: relative; top: 0px; height: 100px; width: 1000px; left:  0px; overflow: hidden; background-color: #ff0000; }
#b { position: relative; top: 0px; height: 100px; width: 1000px; left:  0px; overflow: hidden; background-color: #00ff00; }
#c { position: relative; top: 0px; height: 300px; width:  500px; left:  0px; overflow: hidden; background-color: #0000ff; }
#d { position: relative; top: -300px; height: 300px; width:  500px; left: 500px; overflow: hidden; background-color: #ffff00; }
#e { position: relative; top: -300px; height: 100px; width: 1000px; left:  0px; overflow: hidden; background-color: #00ffff; }

</style>
<body>
<div id="a">
a
</div>

<div id="b">
b
</div>

<div id="c">
c
</div>

<div id="d">
d
</div>

<div id="e">
e
</div>


</body>
</html>

codice:

<html>
<head><title>prova div con position absolute</title></head>
<style type="text/css">
#a { position: absolute; top: 10px; height: 100px; width: 1000px; left:  10px; overflow: hidden; background-color: #ff0000; }
#b { position: absolute; top: 110px; height: 100px; width: 1000px; left:  10px; overflow: hidden; background-color: #00ff00; }
#c { position: absolute; top: 210px; height: 300px; width:  500px; left:  10px; overflow: hidden; background-color: #0000ff; }
#d { position: absolute; top: 210px; height: 300px; width:  500px; left: 510px; overflow: hidden; background-color: #ffff00; }
#e { position: absolute; top: 510px; height: 100px; width: 1000px; left:  10px; overflow: hidden; background-color: #00ffff; }

</style>
<body>
<div id="a">
a
</div>

<div id="b">
b
</div>

<div id="c">
c
</div>

<div id="d">
d
</div>

<div id="e">
e
</div>


</body>
</html>

La grafica riprodotta è identica, però vorrei sapere perché col posizionamento relativo viene visualizzata la scrollbar laterale con un mezzo spazio sotto che rimane vuoto?
Grazie.

**ricman** · 16-02-2009, 10:52

non hai link?

**mld** · 16-02-2009, 15:48

Ho postato il codice dell'impostazione, poi quello che ci metto ci metto...

Basta incollarlo e lanciarlo e si vede la differenza della scrollbar a destra, poi per il resto è uguale.

**ricman** · 16-02-2009, 19:50

Originariamente inviato da mld
Ho postato il codice dell'impostazione, poi quello che ci metto ci metto...

Basta incollarlo e lanciarlo e si vede la differenza della scrollbar a destra, poi per il resto è uguale.

Appunto ... non tutti hanno il tempo di copiare, incollare e fare le prove nel proprio computer

Quando ho un po' più tempo ti ci rido' un'occhiata...

**essezeta** · 17-02-2009, 04:52

perché col posizionamento relativo viene visualizzata la scrollbar laterale con un mezzo spazio sotto che rimane vuoto?

è normale dal momento che hai tirato su degli elementi con top: -300px
infatti di bianco rimangono proprio 300px...

se non hai motivi precisi che rendono necessaria la costruzione che hai fatto potresti floattare a sinistra #C e #D, levare i due top negativi e anche il left: 500px di #D

insomma così (ma rimane comunque una costruzione un po' bizzarra, se puoi modificala, ciao):

codice:

#a { position: relative; top: 0px; height: 100px; width: 1000px; left:  0px; overflow: hidden; background-color: #ff0000; }
#b { position: relative; top: 0px; height: 100px; width: 1000px; left:  0px; overflow: hidden; background-color: #00ff00; }
#c { position: relative; top: 0px; height: 300px; width:  500px; left:  0px; overflow: hidden; background-color: #0000ff; float:left }
#d { position: relative; height: 300px; width:  500px; overflow: hidden; background-color: #ffff00; float:left }
#e { position: relative; height: 100px; width: 1000px; left:  0px; overflow: hidden; background-color: #00ffff; }

**mld** · 17-02-2009, 05:14

In questo modò "d" rimane sotto a "c" e non accanto...

**essezeta** · 17-02-2009, 05:35

@mld
non c'è verso... ti sbagli... dal momento che sono entrambi flottanti a sinistra e non sono larghi più della metà del loro contenitore (in tal caso il body) non possono non mettersi accanto...

testa tu stesso:

codice:

<html>
<style type="text/css">
#a { position: relative; top: 0px; height: 100px; width: 1000px; left:  0px; overflow: hidden; background-color: #ff0000; }
#b { position: relative; top: 0px; height: 100px; width: 1000px; left:  0px; overflow: hidden; background-color: #00ff00; }
#c { position: relative; top: 0px; height: 300px; width:  500px; left:  0px; overflow: hidden; background-color: #0000ff; float:left }
#d { position: relative; height: 300px; width:  500px; overflow: hidden; background-color: #ffff00; float:left }
#e { position: relative; height: 100px; width: 1000px; left:  0px; overflow: hidden; background-color: #00ffff; }
</style>
<body>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
<div id="e">e</div>
</body></html>

**mld** · 17-02-2009, 05:57

Ho provato adesso.
Con IE dà la riga rossa in alto, poi quella verde, poi quella blu, sotto ancora quella gialla e per ultima quella celeste.

Con Mozilla invece mette la riga celeste accanto alla blu anziché metterla sotto.

In ogni caso però quella gialla e sotto quella blu e non accanto!

**ricman** · 17-02-2009, 09:57

Provato questultimo codice...
A si vede uguale su IE e FF... ma avete usato misure grandi... magari non guardarlo a 1024x768

**essezeta** · 17-02-2009, 14:02

come dice ricman testate almeno con 1024 di viewport e vedrete uguale in tutti (?!) i browser...

(tra perentesi: era abbastanza logico anche a occhio... sono quattro regole da leggere... un po' meno di pigrizia... e un po' più di studio...

ciaooo)

Discussione: div absolute e relative

Strumenti discussione

Ricerca discussione

Visualizza

div absolute e relative

Permessi di invio