CSS suprapunere, de ce nu merge pe local?

#1
leny29

Posted 03 February 2023 - 00:04

Member

Grup: Members
Posts: 354
Înscris: 17.06.2013

Salut,

Incerc sa invat cum sa suprapun un text peste o imagine.

Am cautat, am citit si am ajuns la exemplul asta:
https://jsfiddle.net/6nuem19a/

Acum am vrut sa-l reproduc si pe local dar pe local textul imi apare sub imagine. Nu inteleg de ce merge pe jsfiddle dar nu pe local.

Si asta este continutul lui overlay.css salvat pe local

.default-user {
	position: relative;
	outline: #e8e8e8 solid 1px;
	-webkit-filter: grayscale(50%);
	filter: grayscale(50%);
	width:150px;height:150px;
}
#overlay {
  padding:10px;
  position:absolute;
  background-color:white;
  opacity:0.5;	/* -> transparency 50% */
  height:130px;   /* -> image_height - padding */
  width:130px;	/* -> image_width - padding */
  z-index:1;	  /* -> put overlay over image */
  }

Aici e imaginea de pe local.

De ce nu merge pe local?

Initial exemplul era cu position:absolute pentru #default-user, dar pe jsfiddle merge si cu relative, si ar trebui sa mearga si pe local as zice eu...
Folosesc acelasi browser Edge pentru amandoua.

Va multumesc.

Attached Files

overlay_error.png 1.23MB 17 downloads

Back to top

#2
G1q

Posted 03 February 2023 - 07:30

Member

Grup: Members
Posts: 922
Înscris: 31.01.2007

Pune position relative pe .container și position absolute pe imagine.

Back to top

#3
G1q

Posted 03 February 2023 - 09:39

Member

Grup: Members
Posts: 922
Înscris: 31.01.2007

Ignora-mi raspunsul de mai sus. Tot trebuie as pui relative pe .container, dar nu e obligatoriu sa pui absolute pe imagine.
Codul tau ar trebui sa fie ceva de genul:

.container{
   position: relative;
   max-width: 150px;
   aspect-ratio: 1;
}

.default-user{
   width: 100%;
   outline: 1px solid #e8e8e8;
   -webikit-filter: grayscale(50%);
   filter: grayscale(50%);
}

#overlay{
   position: absolute;
   inset: 0; // asta e echivalentul top: 0, left: 0, right: 0, bottom: 0. Astfel incat div-ul care contine textul sa ocupe toata suprafata containerului.
   background-color: white;
   opacity: 0.5;
   z-index: 1;
}

Daca vrei sa centrezi textul pe poza, poti folosi una din variantele urmatoarele (adaugi in continuare la div-ul #overlay):

1. Cu grid:

#overlay{
   display: grid;
   place-items: center;
}

2. Cu flexbox:

#overlay{
   display: flex;
   align-items: center;
   justify-content: center;
}

Edited by G1q, 03 February 2023 - 09:50.

Back to top

#4
leny29

Posted 03 February 2023 - 23:02

Member

Grup: Members
Posts: 354
Înscris: 17.06.2013

G1q, pe 03 februarie 2023 - 09:39, a scris:

Ignora-mi raspunsul de mai sus. Tot trebuie as pui relative pe .container, dar nu e obligatoriu sa pui absolute pe imagine.
Codul tau ar trebui sa fie ceva de genul:

.container{
position: relative;
max-width: 150px;
aspect-ratio: 1;
}

.default-user{
width: 100%;
outline: 1px solid #e8e8e8;
-webikit-filter: grayscale(50%);
filter: grayscale(50%);
}

#overlay{
position: absolute;
inset: 0; // asta e echivalentul top: 0, left: 0, right: 0, bottom: 0. Astfel incat div-ul care contine textul sa ocupe toata suprafata containerului.
background-color: white;
opacity: 0.5;
z-index: 1;
}

Daca vrei sa centrezi textul pe poza, poti folosi una din variantele urmatoarele (adaugi in continuare la div-ul #overlay):

1. Cu grid:

#overlay{
display: grid;
place-items: center;
}

2. Cu flexbox:

#overlay{
display: flex;
align-items: center;
justify-content: center;
}

Multumesc.

Functioneaza. Solutia este inset:0;
Am incercat fara relativ pe container si tot merge.

Back to top

#5
G1q

Posted 04 February 2023 - 06:51

Member

Grup: Members
Posts: 922
Înscris: 31.01.2007

Daca nu pui relative pe container atunci elementele cu poziție absolute vor fi relative cu primul p�rinte care are pozitia relative. Daca niciun p�rinte nu are poziție relative, atunci se vor raporta la tagul <body>. Deci codul functioneaza și f�r� relative pe container, dar daca mai adaugi elemente in pagina html s-ar putea s� dea niste rezultate la care nu te aștepți.

Back to top

#6
leny29

Posted 04 February 2023 - 10:03

Member

Grup: Members
Posts: 354
Înscris: 17.06.2013

G1q, pe 04 februarie 2023 - 06:51, a scris:

Daca nu pui relative pe container atunci elementele cu poziție absolute vor fi relative cu primul părinte care are pozitia relative. Daca niciun părinte nu are poziție relative, atunci se vor raporta la tagul <body>. Deci codul functioneaza și fără relative pe container, dar daca mai adaugi elemente in pagina html s-ar putea să dea niste rezultate la care nu te aștepți.

Multumesc frumos, acum am inteles

Back to top

Anunturi

Neurochirurgie minim invazivă

"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv.

Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice.

www.neurohope.ro

CSS suprapunere, de ce nu merge pe local?

#1 leny29 Posted 03 February 2023 - 00:04

Attached Files

#2 G1q Posted 03 February 2023 - 07:30

#3 G1q Posted 03 February 2023 - 09:39

#4 leny29 Posted 03 February 2023 - 23:02

#5 G1q Posted 04 February 2023 - 06:51

#6 leny29 Posted 04 February 2023 - 10:03

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
leny29

Posted 03 February 2023 - 00:04

#2
G1q

Posted 03 February 2023 - 07:30

#3
G1q

Posted 03 February 2023 - 09:39

#4
leny29

Posted 03 February 2023 - 23:02

#5
G1q

Posted 04 February 2023 - 06:51

#6
leny29

Posted 04 February 2023 - 10:03