Z-index doet zijn werk niet

[devhouse]

Hallo allemaal,

Ik ben bezig om een soort van 'spreekwolk' te maken in html/css. Nu heb ik daarvoor de code geschreven:

code:

<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>

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?

[macciez]

Als ik het goed heb kun je gefloate div's niet met z-index beinvloeden, maar pin me er niet op vast

[devhouse]

macciez schreef op zondag 09 augustus 2009 @ 19:32:
Als ik het goed heb kun je gefloate div's niet met z-index beinvloeden, maar pin me er niet op vast

bedankt voor je reactie,
nu heb ik kunnen googlen, en heb dit gevonden. Ik heb het dus opgelost door position:relative toe te voegen.

Bedankt!

[Kiphaas7]

Z-index werkt alleen op elementen met position:absolute, position:relative of position:fixed (fixed werkt niet in IE6).

Dus inderdaad, een oplossing is position:relative.

EDIT: Bedenk ook dat met negative margins een hoop op te lossen is, om elementen te laten overlappen. Al weet ik niet in hoever dat hier toepasbaar is, aangezien je voorbeeld me niet helemaal duidelijk is.

[ Voor 55% gewijzigd door Kiphaas7 op 09-08-2009 20:53 ]