sovrapporre immagini con z-index

**sitodue** · 03-12-2012, 16:05

Ciao a tutti;
ho un div di dimensioni fisse con un'immagine di bg; l'immagine è stata creata appositamente con gimp e fa solo da cornice in quanto al centro è trasparente.
Il div deve contenere un'altra immagine che vorrei fosse sottostante la cornice, ma non riesco a sottoporla... è possibile farlo con z-index?
il codice è questo:

codice:

<head>
<style type="text/css">

#cont {
position:relative;
height:500px;
width:500px;
background-image:url(img/cornice.png);
z-index:2;
}

#cont img {
position:relative;
z-index:1;
}

</style>
</head>

<body>
<div id="cont">
    [img]img/123.jpg[/img]
</div>
</body>

Ma anche avendo inserito z-index non ottengo nessun risultato, ossia l'immagine interna al div continua a sovrascrivere la cornice di background...

**bigdada** · 03-12-2012, 17:18

non ho mai usato z-index, ma da quanto ho capito vuoi mettere una immagine sopra l'altra.
se è corretto puoi impostare tramite css la posizione te in modo manuale usando il comando position:absolute;
questo ti porta l'immagine nell'angolo in alto a sinistra e la "scolla" dalla pagina, dopo puoi andare te a impostare lo spazio dal margine sinistro e superiore spostandola dove vuoi.
fammi sapere se hai risolto

**Prill** · 03-12-2012, 21:20

Una soluzione alternativa: perché non ritagli l'immagine della parte che scomparirebbe sotto la cornice?

**Mich_** · 06-12-2012, 09:40

Nell'esempio del primo post, c'e` un elemento contenuto in un altro che tu vorresti mettere dietro al contenitore. Questo non e` possibile.

Quello che puoi fare e`:

codice:

<div id="conten_comune">
  <div id="cornice">&amp;nbsp;</div>
  <div id="contenuto">
    ... il resto della cosa ...
  </div>
</div>

E a questo punto puoi usare il posizionamento dei due div interni rispetto al contenitore comune ed eventualmetne sovrapporli con z-index.
E` la tecnica usata per sistemare le cornici sopra le immagini in alcune gallerie.
(nota che gli oggetti non devono essere necessariamente dei <div>, ma con i <div> la cosa risulta piu` semplice, dato che sono gia` di tipo blocco per default)

PERO` ...

pero` tieni presente che in tal caso non potrai interagire con il blocco che sta sotto, dato che e` coperto dal tuo strato invisibile ed impenetrabile

**sgogghy** · 06-12-2012, 12:48

Togli z-index da #cont e metti z-index:-1; nell'immagine.
Così:

codice:

<style type="text/css">

#cont {
position:relative;
height:500px;
width:500px;
background-image:url(img/cornice.png);
}

#cont img {
position:relative;
z-index:-1;
}

</style>
</head>

<body>
<div id="cont">
    [img]img/123.jpg[/img]
</div>

**sitodue** · 07-12-2012, 21:02

Grazie a tutti per l'aiuto...
Ho cambiato approccio e inserito direttamente l'immagine come livello in gimp...

Discussione: sovrapporre immagini con z-index

Strumenti discussione

Ricerca discussione

Visualizza

sovrapporre immagini con z-index

Permessi di invio