Z-index doet zijn werk niet
Ik ben bezig om een soort van 'spreekwolk' te maken in html/css. Nu heb ik daarvoor de code geschreven:
Code (php)
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
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<style type="text/css">
.talk-bubble-container {
width: 636px;
float: right;
margin-right: 10px;
margin-top: 10px;
}
.talk-bubble-arrow {
background-image: url('http://media.devhouse.nl/v0.2/images/speak-bubble.png');
width: 31px;
height: 100px;
margin-top: 50px;
float: left;
z-index: 20;
margin-right: -2px;
}
.talk-bubble-text {
float: left;
width: 604px;
height: auto;
z-index: 1;
border: 1px solid #e8e6da;
min-height: 200px;
}
</style>
<div class="talk-bubble-container">
<div class="talk-bubble-arrow"></div>
<div class="talk-bubble-text">
<p>Dit is een test!</p>
</div>
<div style="clear:both;"></div>
</div>
.talk-bubble-container {
width: 636px;
float: right;
margin-right: 10px;
margin-top: 10px;
}
.talk-bubble-arrow {
background-image: url('http://media.devhouse.nl/v0.2/images/speak-bubble.png');
width: 31px;
height: 100px;
margin-top: 50px;
float: left;
z-index: 20;
margin-right: -2px;
}
.talk-bubble-text {
float: left;
width: 604px;
height: auto;
z-index: 1;
border: 1px solid #e8e6da;
min-height: 200px;
}
</style>
<div class="talk-bubble-container">
<div class="talk-bubble-arrow"></div>
<div class="talk-bubble-text">
<p>Dit is een test!</p>
</div>
<div style="clear:both;"></div>
</div>
De bedoeling is nu dat de class talk-bubble-arrow boven talk-bubble-text staat. Ik dacht dit te kunnen doen via z-index, dus ik heb talk-bubble-arrow de waarde 20 meegegeven, en talk-bubble-text de waarde 1. Ik dacht dat nu alles goed werkte. Maar helaas, de z-index doet zijn werk niet. het ziet er nu als volgt uit:
Dat oranje(??) ding is dus de talk-bubble-arrow, en deze staat onder talk-bubble-text. Dit zie ik doordat de border van talk-bubble-text eroverheen gaat. Dit mag dus niet.
Weet iemand misschien wat er fout gaat?
Zie http://www.w3schools.com/Css/pr_pos_z-index.asp
z-index werkt alleen op gepositioneerde elementen, dus geef je element een position: relative (of absolute / fixed)
