ModalPopupExtender + User Control + Div Opacity problem

Hi all,

Ok...this ones a tricky one to explain.

I have a User Control called 'UC_Latest' this basically displays all the latest CD's / News / Events. I have dragged this onto my masterpage. Works fine no problem. However i have a datalist in my UC_Lastest which displays a list of new CD's. I have added a ModalPopupExtender inside the <itemtemplate> which then calls Panel1 when clicked. Code for the datalist below:

<asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDB_New" RepeatColumns="2" Width="100%" RepeatDirection="Horizontal" BackColor="White" OnSelectedIndexChanged="DataList1_SelectedIndexChanged">
<ItemTemplate>
<asp:ImageButton id="newthumb3" runat="server" AlternateText='<%# Eval("cart_id") %>' CssClass="imgborder" BorderWidth="1px" BorderStyle="Dashed" BorderColor="Silver" ImageUrl='<%# "~/images/CD_covers/small/" + (DataBinder.Eval(Container.DataItem, "cart_id")) + ".gif" %>' />

<cc1:ModalPopupExtender ID="ModalPopupExtender" runat="server"
TargetControlID="newthumb3"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
CancelControlID="CancelButton"
DropShadow="true"
Drag="true"
PopupDragHandleControlID="Panel3" />

<asp:Panel ID="Panel1" runat="server" Style="display: none" Height="300px" Width="300px">
<asp:Panel ID="Panel3" runat="server" CssClass="modalPopup" BackColor="White" Height="300px" Width="300px">
<div>
<p style="text-align: center;">
CD Content goes here<br />
<asp:Label ID="lbl_CD_passed" Text="CD DETAILS" runat="server"></asp:Label></p>
<p style="text-align: center;">
<br />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</p>
</div>
</asp:Panel>
</asp:Panel>

</ItemTemplate>
<ItemStyle HorizontalAlign="Center" Width="110px" />
</asp:DataList>

When i click a CD image, the modalPopup then displays the Panel 1 which displays some text about the CD. I need this Panel control inside the <itemTemplate> so that i can display the selected information for that row. The Problem is that i have a div box set to 70% opacity on the homepage. Now for soem reason i can see the Panel control sitting behind the div box . Strange thing is if i move the Panel and put the code outside the datalist and then right at the top of the UC_Latest then when i click a CD the panel box appears over everything as expected but because it isn't in the datalist it has no CD info.

So either solution will do:

1. How can i send information from the Datalist to the Panel control which is outside the Datalist?

2. If the Panel inside the Datalist why is it sitting behind the Div on the homepage. I have tried messing around with z-index. No success.

Please any help or poniters on this will be grately appreciated as i am loosing the will to live with the bug. :(

I hope this all makes sense.Ok, i have got it all working. I simply removed position:relative from one of my DIV tags on the homepage and its' now working. Still not sure why it had such a big effect on everything.

Thanks.