Sto provando ad imparare un po di CSS. Al momento studio il flex grid. A livello teorico, mi è abbastanza chiaro ma, come in tutte le cose, la pratica è ben diversa. Al momento, vorrei provare a sovrapporre due semplici rettangoli, nella stessa identica posizione. Non ho capito come io possa fare a dichiarare un secondo elemento, nel mio caso il rettangolo verde, che si debba sovrapporre esattamente al primo: "inner-box-1". Se provo a dichiarare un nuovo div annidato dentro il flex-container, semplicemente mi crea un nuovo elemento, sulla destra, spostando gli altri elementi. Al momento ho risolto posizionando il box verde usando il "position: relative" e dichiarando dove metterlo, ma cosi non può funzionare. Non sarebbe responsive, e rischierei che il box verbe non vada a sovrapporsi al precedente.
Dunque la domanda: qual'è, semplicemente, la sintassi, nel CSS per generare un secondo elemento e centrarlo sul precedente, nella stessa posizione?
Altra domanda: si può fare in modo che il secondo box diventi trasparente, ed imponga la trasparenza anche alla parte che lui copre del box sottostante, in modo da far scomparire entrambi i box?
Codice: Seleziona tutto
<!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>Apache2 Ubuntu Default Page: It works</title>
<style type="text/css" media="screen">
.flex-container-leonardo {
display: flex;
flex-direction: row;
flex-wrap: unwrap;
justify-content: space-around;
align-items: center;
align-content: center;
height: 10em;
padding: 1em;
border: 2em solid blue;
margin: 1em;
}
.inner-box-1 {
position: relative;
padding: 1px;
border: 4px solid #d60927;
width: 10em;
height: 8em;
border-radius: 30%;
text-align: center;
background-image: conic-gradient(green, yellow, red, blue, orange);
}
.green-box-1 {
position: relative;
width: 7em;
height: 5em;
margin-left: 1.5em;
margin-top: 0.5em;
background-color: green;
border-radius: 30%;
text-align: center;
opacity: 0.5;
}
</style>
</head>
<body>
<div>
Header
</div>
<div class="flex-container-leonardo">
<div class="inner-box-1">1
<div class="green-box-1">Green box</div>
</div>
<div>2 Il percorso del CSS è:<br><br>/var/www/html</div>
<div>3</div>
</div>
<div>
Footer
</div>
</body>
</html>
Quello cher SVG ha in piu' sono le animazioni.