Immagini sovrapposte e browser

**Manuelandro** · 11-01-2011, 23:46

Salve.

io ho utilizzato questo css per posizionare un'immagine png semitrasparente sopra un'altra, all'interno di un div:

codice:

.sopra {
    left: 0px;
    margin-bottom: -110px;
    position: relative;
    top: -127px;
    z-index: 999;
}

ed in effetti si posiziona sopra l'immagine pricipale.
Il problema è che varia da browser a browser ad esempio:

1)la posizione varia tra chrome, firefox e ie di una manciata di pixel

2)con firefox tutti gli elementi che vengono dopo quest'immagine (elementi che si trovano all'interno dello stesso div) si spostano verso il basso come questa png occupasse spazio nello stesso z-index; con gli altri browser ciò non accade.

Mi chiedo allora, sbaglio qualcosa, o c'è una soluzione migliore per realizzare questa cosa?

grazie

**sandrone65** · 12-01-2011, 01:05

Per capire bene cosa stai facendo e quindi analizzare il comportamento dei browser bisognerebbe vedere il contesto html/css in cui lavori, e quindi dimensioni e posizionamento di contenuti e contenitori.

In questo esempio il quadrato verde è perfettamente sovrapposto al quadrato rosso (sotto).
Spero ti sia utile :-)
Ciao

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
.sotto {
width:200px;
height:200px;
background:red;
position:relative;
}
.sopra {
width:200px;
height:200px;
position: absolute;
left: 0px;
top:0px;
background:green;
}
</style>
</head>
<body>
<div class="sotto">
<div class="sopra"></div>
</div>
</body>
</html>

Discussione: Immagini sovrapposte e browser

Strumenti discussione

Ricerca discussione

Visualizza

Immagini sovrapposte e browser

Permessi di invio