Embedded Files
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Layer z-index</title>
<style>
body {
background-color: #ffffff;
}
.linea1 {
width: 100%; /* lunghezza orizzontale */
border: none;
height: 1px; /* spessore */
background-color: #555555; /* colore */
margin-top: 0px; /* margine dall'elemento superiore */
margin-bottom: 0px; /* margine dall'elemento inferiore */
}
.linea2 {
width: 100%; /* lunghezza orizzontale */
border: none;
height: 1mm; /* spessore */
background-color: #555555; /* colore */
margin-top: 5px; /* margine dall'elemento superiore */
margin-bottom: 0px; /* margine dall'elemento inferiore */
}
.linea3 {
width: 100%; /* lunghezza orizzontale */
border: none;
height: 2mm; /* spessore */
background-color: #555555; /* colore */
margin-top: 6px; /* margine dall'elemento superiore */
margin-bottom: 0px; /* margine dall'elemento inferiore */
}
.linea4 {
width: 100%; /* lunghezza orizzontale */
border: none;
height: 7mm; /* spessore */
background-color: #555555; /* colore */
margin-top: 8px; /* margine dall'elemento superiore */
margin-bottom: 22px; /* margine dall'elemento inferiore */
}
.base {
width: 100%; /* lunghezza orizzontale */
position: absolute; /* posizione riferita alla finestra */
bottom: 0; /* posizione dal margine inferiore della finestra */
left: 0; /* posizione dal margine sinistro della finestra */
height: 3cm; /* spessore */
background-color: #00aaff; /* colore */
z-index: 3; /* layer */
}
.base-background {
width: 100%; /* lunghezza orizzontale */
position: absolute; /* posizione riferita alla finestra */
bottom: 0; /* posizione dal margine inferiore della finestra */
left: 0; /* posizione dal margine sinistro della finestra */
height: 4cm; /* spessore */
background-color: #00aaff; /* colore */
z-index: 1; /* layer */
}
.layer1 {
position: relative;
z-index: 1;
}
.layer3 {
position: relative;
z-index: 3;
}
.cerchio {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
z-index: 2;
animation: salire 5s ease-in-out infinite;
}
@keyframes salire {
from {
top: calc(100vh - 100px);
left: calc(25vw - 50px);
}
to {
top: calc(0vh);
left: calc(25vw - 50px);
}
}
</style>
</head>
<body>
<h1 class="layer3">Sovrapposizione di immagini: layer z-index</h1>
<div class="layer3">
<hr class="linea1">
<hr class="linea2">
<hr class="linea3">
<hr class="linea4">
</div>
<div class="layer1">
<hr class="linea1">
<hr class="linea2">
<hr class="linea3">
<hr class="linea4">
</div>
<div class="layer3">
<hr class="linea1">
<hr class="linea2">
<hr class="linea3">
<hr class="linea4">
</div>
<div class="base"></div>
<div class="base-background"></div>
<div class="cerchio"></div>
</body>
</html>
Ritorna agli Esempi
Page updated
Google Sites
Report abuse