Problem overlay div

Hi, I'm making a weekly planner, with a div for every description event.
On click on event, a balloon with its details becomes visible.

I illustrate the problem with this image:
http://i50.tinypic.com/8ze5qt.gif

The below balloon is displayed correctly because the relative event div was created AFTER the event than overlapping.
Unlike the above balloon, is overlapped by the other events, because they were loaded after that.

I would that in any case, the balloon div will overlap with any event div.
I tried setting the z-index, but does not work.

If it can be useful to place the css event and the comic:

Code:

---

.weekEvent{
        position:absolute;
        background-color:#FFF;
        border:1px solid #000;
        z-index:1000;
}
.balloon{
        position:absolute;
        border:1px solid #000;
        left:100px;
        top: 80px;
        width:200px;
        height:auto;
        font-size:0.7em;
        padding:1px;
        background-color:#F6DBA2;
        display : block;
        z-index:100000;
}

---

Of course the balloon div is contained in week event
What's wrong?
thanks

You should be creating the balloons dynamically with JavaScript during the onclick event. Just pass the populating HTML as a parameter.