Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Ce farmacie VET online care "...

De unde cumparați legume si fructe?

Samsung S21 ultra

Plasa de umbrire peste gard de pl...
 O smecherie pe care nu o inteleg

Balcon parter fara acte

unde gasesc un speed bag in bucur...

Programe TV cu altfel de sporturi
 Laptop "bun la toate" max...

navigatie noua vw tiguan

ctfmon.exe - System Error (in Saf...

Ați prins vremurile cand 120 Volț...
 Whatsapp nu afișeaza numele ...

Medii admitere Politehnica Bucure...

Se extinde Baza de la Kogalniceanu

Politist mutilat de caine in curt...
 

CSS suprapunere, de ce nu merge pe local?

- - - - -
  • Please log in to reply
5 replies to this topic

#1
leny29

leny29

    Member

  • Grup: Members
  • Posts: 434
  • Î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



#2
G1q

G1q

    Active Member

  • Grup: Members
  • Posts: 1,019
  • Înscris: 31.01.2007
Pune position relative pe .container și position absolute pe imagine.

#3
G1q

G1q

    Active Member

  • Grup: Members
  • Posts: 1,019
  • Î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.


#4
leny29

leny29

    Member

  • Grup: Members
  • Posts: 434
  • Înscris: 17.06.2013

 G1q, on 03 februarie 2023 - 09:39, said:

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.

#5
G1q

G1q

    Active Member

  • Grup: Members
  • Posts: 1,019
  • Î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.

#6
leny29

leny29

    Member

  • Grup: Members
  • Posts: 434
  • Înscris: 17.06.2013

 G1q, on 04 februarie 2023 - 06:51, said:

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

Anunturi

Bun venit pe Forumul Softpedia!

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate