CSS: z-index
Qui di seguito vi scrivo, sia il codice del file html e qello del css esterno
Se volete vedere il problema, create 2 file, uno .html e uno .css con il testo che vi scrivo di seguito.
La domanda è questa: Perchè il BOX GRIGIO, nonostante scrivo z-index3 non mi viene in primopiano?
GRAZIE A TUTTI
allego testo:
<!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>PROVA POSIZIONE ELEMENTI</title>
<link href="position.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box1">GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO </div>
<div id="box2">BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU </div>
<div id="box3">GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO </div>
</body> </html>CSS esterno
@charset "UTF-8";
/* CSS Document */
body
{
margin: 0;
padding: 0;
}
#box1 {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
background-color:#FF9;
border: 2px solid #936;
z-index: 1;
}
#box2 {
position: absolute;
top: 0px;
left: 0px;
width: 300px;
background-color:#0CF;
border: 2px solid #936;
z-index: 2;
}
#box3 {
margin-left: auto;
margin-right: auto;
width: 600px;
background-color:#CCC;
border: 2px solid #936;
z-index: 3;
}Risposte
Mi rispondo da solo ..... mi son accorto ora che mancava un trattino ....
io, nel css, ho scritto: z-index: 1;
mentre è corretto: z-index:-1;
grazie lo stesso a tutti voi
Benvenuto Signor Gatto Silvestro!
bò... io non vedo questa sovrapposizione ho fatto un esempio mio mettendo
tutti e tre i box uno sopra l'altro non so se può servire...
questo è al naturale come si presentano i div
esempio div al naturale
questo invece è con i div sovrapposti
div sovrapposti
questo è lo script
nome file: scatole.css#box1{
position: absolute;
top: 0px;
left: 8px;
width: 300px;
background-color:#FF9;
border: 2px solid #936;
z-index:1;
}
#box2{
position: relative;
top: 50px;
left: 0px;
width: 300px;
background-color:#0CF;
border: 2px solid #936;
z-index:2;
}
#box3{
position: relative;
top: -50px;
left: 0px;
width: 300px;
background-color:#CCC;
border: 2px solid #936;
z-index:3;
}
e questa la pagina esempio.html che aspira il css<head>
<link href="scatole.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box1">
GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO
GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO
GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO GIALLO
GIALLO GIALLO GIALLO GIALLO </div>
<div id="box2">
BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU
BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU
BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU
BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU
BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU BLU </div>
<div id="box3">
GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO
GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO
GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO
GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO GRIGIO </div>
</body>
Grazie 1000 MAX 
