I have a Splitter on a page and I can not get a div to show on top of it, aka to have a higher z-index. I have looked all through your boards but haven't found any documentation on how to rememedy this. I have the newest version of the control too just downloaded it a few weeks ago.

Please advise

I have the most basic page I can create and the problem still exists

here is a screenshot of my issue



the gray box on the right is a regular div with a zindex of 999

I actually tried to wrap the EOsplitter into a div with a zindex of 1

my problem is that the gray div can not be accessed, so if I had controls like a textbox or something I cant access them. You'll see from my screenshot that I tried highlighting the text in the gray div, but the EO splitter content gets selected instead.

The content of the gray div shows behind the EO splitter panel. I would actually like to have the gray div lay on top of the EO splitter and hide what is behind it, which is normal practice.

here is the markup

<div style="float:right; padding:20px; border:solid 1px black; z-index:999; background:#eaeaea;">
this content is not accessible.
<br />
controls here are not accessible
<br />
the splitter actually gets the cursor
<br />
z-index has no impact
</div>
<div style="z-index:1;">
<eo:Splitter runat="server" Height="500px" Width="1000" id="Splitter1" BorderStyle="Solid" DividerSize="7" BorderWidth="0px" BorderColor="#dadada" DividerImage="00080411" ControlSkinID="None" style="z-index:1" >
<eo:SplitterPane id="SplitterPane1" Width="445" runat="server">
lots of content goes here lots of content goes here lots of content goes here lots of content goes here lots of content goes here lots of content goes here
</eo:SplitterPane>
<eo:SplitterPane id="SplitterPane2" Width="445" runat="server">
lots of content goes here lots of content goes here lots of content goes here lots of content goes here lots of content goes here lots of content goes here
</eo:SplitterPane>
</eo:Splitter>