Ik probeer dmv. het z-index attribuut verschillende elementen bovenop elkaar te zetten. Dit wil vreemd genoeg alleen lukken als 1 van de elementen position:absolute als style heeft en ik wil dit nu juist in postition:relative doen (aangezien beide elementen relatief van een container gepositioneerd moeten worden).
In de CSS specificatie staat het volgende over z-index:
Hieronder een voorbeeldje:
Dit geeft als resultaat dat de normale flow wordt aangehouden en de elementen niet gestapeld worden. Heeft iemand een idee wat dit veroorzaakt en hoe ik dit kan oplossen?
In de CSS specificatie staat het volgende over z-index:
Dus je zou verwachten dat het ook gewoon op elementen met position: relative zou moeten werken.'z-index'
Value: auto | <integer> | inherit
Initial: auto
Applies to: positioned elements
Hieronder een voorbeeldje:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Z-index test</title>
<style type="text/css">
#container1 {
position: relative;
top: 0;
left: 0;
z-index: 1;
}
#container2 {
position: relative;
top: 0px;
left: 45%;
z-index: 2;
}
</style>
</head>
<body>
<p id="container1">Text1</p>
<p id="container2">Text2</p>
</body>
</html> |
Dit geeft als resultaat dat de normale flow wordt aangehouden en de elementen niet gestapeld worden. Heeft iemand een idee wat dit veroorzaakt en hoe ik dit kan oplossen?
:strip_exif()/u/39521/icoon.gif?f=community)
/u/7685/ruinmytune-60x60.png?f=community)
