Ako prekryť priehľadným divom iný div

1daemon1 · Napísal **1daemon1**: 14.01.2012 14:34

Zdravím, tak chcel by som znova poprosiť o pomoc.
Mám na stránke pozadie - modrú farbu cez celú stránku.
Na pozadí mám div, s position: absolute; a žltým pozadím.
Nad obrázkom s position: absolute mám div, s position: relative; a priehľadným pozadím.
Chcem, aby mi div s position: relative, ktorý je priehľadný, prekryl obrázok s position: absolute; ale zobrazil pozadie stránky.

Ukážka:

Kód:

<!DOCTYPE html>

<html>
      <head>
         <style>
            html, body {
               background-color: blue;
            }
            
            * {
               margin: 0;
               padding: 0;
            }
            
            #absolute {
               position: absolute;
               top: 0;
               left: 0;
               width: 50px;
               height: 50px;
               background-color: yellow;
            }
            
            #relative {
               position: relative;
               margin-top: 25px;
               margin-left: 25px;
               width: 50px;
               height: 50px;
               border: 1px solid black;
            }
         </style>
      </head>
      <body>
         <div id="absolute"></div>
         <div id="relative"></div>
      </body>
</html>

Zobrazí:

Chcem aby zobrazilo:

V skutočnosti tam nemám background-color ale background-image, preto nemôžem jednoducho relatívnemu divu nastaviť farbu pozadia na blue.

// Napadá ma riešenie, že by som dal relatívnemu divu vlastnosť overflow:hidden;, vytvoril v ňom nový div a napozicioval ho tak, že by sa začínal od lavého horného rohu celej stránky, dal mu width a height na 100% a dal doňho zasa ten obrázok, čo mám na pozadí.
To by som ale musel poznať pozíciu toho relatívneho divu, aby som ten v ňom - ten nový mohol napoziciovať na lavý horný roh stránky. A tú nepoznám.

Zoly · Napísal **Zoly**: 16.01.2012 21:12

tomu čo chceš mať vzadu daj z-index:1 a tomu čo vpredu z-index:2 , snáď by to malo fungovať

Ako prekryť priehľadným divom iný div

Podobné témy