<!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>
@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;
}
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
Re: CSS: z-index
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
001design.it ® è un marchio registrato.
© 2004-2020 Molfese Paolo - P.Iva: 03430820617 - All rights reserved | Tutti i diritti sono riservati.