Buongiorno,
non riesco a gestire la proprietà Top del tag Div Class="scatola" (qualsiasi valore metto nel top non vien considerato).
Entrando con la funzione “Ispeziona da Chrome” il sistema mi segnala sulla proprietà Top relativa al DIV “scatola” quanto segue:
“La proprietà position: static impedisce a top di avere un effetto”
Non riesco a capire perché, in quanto DIV Scatola è Absolute all'interno di un tag Contenitore che è Relative.
Dove vede il sistema la “Position: static” ?
Potete gentilmente aiutarmi a capire ?
Grazie
Codice Html
<div class="banner">
</div>
<div class="contenitore">
<div class="scatola">
<div class="interno-scatola">
<p class="testo">
<h3 style="color: black; text-align: center;"><strong>STAGIONE 2023-2024</strong></h3>
<h3 style="color: green; text-align: center;"><strong>VISITE MEDICHE - INFORMAZIONI</strong></h3>
<br>
<br>
<p>La vigente normativa prevede che, per la pratica sportiva non agonistica dai 6 anni fino agli 11 anni, occorre il certificato medico xxxxxxxxxxxxxxxxx
</p>
</div>
</div>
</div>
Proprietà CSS
/***********************************/
/* Media Query - dispositivi pc desktop */
@media only screen and (min-width: 851px) and (max-width: 1800px) { /* dispositivi pc desktop */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.banner {
display: block;
position: absolute;
top: 100px;
width: 100%;
height: 45%;
background-image: url('/vibe/Immagini_Sfondi/Visite_Mediche.jpg');
background-size: cover;
background-position: center;
}
.contenitore {
display: block;
position: relative;
}
.scatola::before {
content: ' ';
display: block;
position: absolute;
background-image: url('/vibe/Immagini_Sfondi/corsa-bimbi-slide.jpg');
background-size: cover;
background-position: center;
top: 300px;
width: 100%;
height: 100%;
opacity: 0.1;
padding: 20px;
}
.interno-scatola {
position: absolute;
top: 270px;
border: 3px solid green;
margin: 60px 150px 20px 150px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Effetto ombra */
}
.testo {
color: black;
}
}