Come risolvere la Z-Index Opacità in IE

April 1

L'indice z di un elemento definisce come alto o basso è in una pila di articoli strato. Accoppiato con l'opacità, questo ti dà la possibilità di impilare gli elementi e rendere gli elementi più alti semi-trasparente. IE 7 o gli utenti precedenti rilevati errori con gli elementi che utilizzano l'attributo z-index non sono stati stratificati correttamente: l'altro strato che avrebbe dovuto essere in cima stava comparendo sul fondo. Questo è accaduto perché IE era di iniziare il z-index "0", quando lo z-index avrebbe dovuto default su "auto". Questo errore è stato corretto in Internet Explorer 8, che mostra gli strati in modo corretto.

istruzione

1 Impostare una posizione per il vostro elemento. La z-index funziona solo con elementi posizionati. Ci sono cinque opzioni per gli elementi posizionati: posizioni "statico" gli elementi nello stesso ordine in cui appaiono nel documento; "Absolute" viene utilizzato per impostare la posizione assolutamente da un angolo della pagina; "Fixed" è simile, tranne che si muove con la finestra del browser; "Relative" viene utilizzato per muovere l'elemento rispetto a dove sarebbe posizionato se la posizione fosse impostato su "statico"; infine, "Eredita" utilizza lo stile di posizione per l'elemento genitore.

2 Definire l'elemento che si desidera sul fondo con il più basso z-index, come "-1" o "001" o anche "1000" Il numero non è importante, salvo come si riferisce agli altri numeri; il successivo elemento nella pila avrebbe bisogno di essere "2", "002" o "2000" Ad esempio, per posizionare un'immagine assolutamente in un angolo della vostra pagina, sarebbe simile a questa:

<Img src = "http://www.yourdomain.com/yourimage.jpg&quot; style =" position: absolute; top: 0; left: 0; z-index: 01; "/>

3 Utilizzare il "filtro" proprietà per realizzare l'elemento superiore semitrasparente. La maggior parte dei browser usano "opacità" per rendere un elemento semi-trasparente, ma questo non funziona per Internet Explorer attraverso IE 8. Per rendere un elemento trasparente in CSS, è inoltre necessario aggiungere l'attributo "Filtro: alpha (opacità = 100 ). " Per esempio, se si desidera un elemento DIV al 50 per cento trasparente su un'immagine, aggiungere sia "opacità" e "filtro" in questo modo:

<Img src = "http://www.yourdomain.com/yourimage.jpg&quot; style =" position: absolute; top: 0; left: 0; z-index: 01; "/>
<Div style = "Opacità: 0,5; filtro: alpha (opacità = 50); position: absolute; top: 0; left: 0; z-index: 02;"> Content </ div>

4 Salvare il file e provarlo in Internet Explorer. E 'meglio per testare la vostra pagina in più browser, come Firefox, Chrome e Safari.

Consigli e avvertenze

  • "Static" è la posizione predefinita per un elemento se una posizione non è definito.
  • La posizione "Eredita" non è stato supportato in Internet Explorer fino a quando IE 8.