[CSS] Generare due elementi alle stesse coordinate

Linguaggi di programmazione: php, perl, python, C, bash e tutti gli altri.
Avatar utente
DoctorStrange
Imperturbabile Insigne
Imperturbabile Insigne
Messaggi: 2913
Iscrizione: mercoledì 14 ottobre 2015, 9:33
Desktop: Gnome3
Distribuzione: Ubuntu 22.04 LTS Jammy Jellyfish
Sesso: Maschile
Località: Roma, Italia

[CSS] Generare due elementi alle stesse coordinate

Messaggio da DoctorStrange »

Buonasra a tutti,

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>
Allegati
CSS-test.png
Lucio C
Scoppiettante Seguace
Scoppiettante Seguace
Messaggi: 378
Iscrizione: venerdì 10 dicembre 2021, 18:33
Desktop: fvwm
Distribuzione: (X)Ubuntu20@home; openSUSE42.3@work
Sesso: Maschile
Località: Paneropoli

Re: [CSS] Generare due elementi alle stesse coordinate

Messaggio da Lucio C »

perche' con CSS e non in SVG ?
The reasonable man adapts himself to the world: the unreasonable one persists in trying to adapt the world to himself. Therefore all progress depends on the unreasonable man. (G.B. Shaw)
Avatar utente
DoctorStrange
Imperturbabile Insigne
Imperturbabile Insigne
Messaggi: 2913
Iscrizione: mercoledì 14 ottobre 2015, 9:33
Desktop: Gnome3
Distribuzione: Ubuntu 22.04 LTS Jammy Jellyfish
Sesso: Maschile
Località: Roma, Italia

Re: [CSS] Generare due elementi alle stesse coordinate

Messaggio da DoctorStrange »

Non capisco quale attinenza abbia con la domanda. Inoltre, non cambia nulla. Anche se ci mettessi una qualunque immagine, l'orientamento ed il posizionamentoo di questa, sarebbe comunque regolato dal CSS.
Lucio C
Scoppiettante Seguace
Scoppiettante Seguace
Messaggi: 378
Iscrizione: venerdì 10 dicembre 2021, 18:33
Desktop: fvwm
Distribuzione: (X)Ubuntu20@home; openSUSE42.3@work
Sesso: Maschile
Località: Paneropoli

Re: [CSS] Generare due elementi alle stesse coordinate

Messaggio da Lucio C »

Uso pochissimo CSS e solo per cose statiche e stabili (nonostante in rete si trovino esempi di tante cose fatte in CSS o in CSS+SVG), mentre SVG (*) essendo fatto "per disegnare" gestisce naturalmente il posizionamento, la trasparenza ... e anche le animazioni.

(*) anche se non mi piace tanto, per ottenere degli effetti che in PostScript sono nativi occorre combinarlo con javascript. Piu' che altro ci faccio i biglietti di Natale :D Quello cher SVG ha in piu' sono le animazioni.
The reasonable man adapts himself to the world: the unreasonable one persists in trying to adapt the world to himself. Therefore all progress depends on the unreasonable man. (G.B. Shaw)
Scrivi risposta

Ritorna a “Programmazione”

Chi c’è in linea

Visualizzano questa sezione: 0 utenti iscritti e 3 ospiti