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.
