RadMenu's default z-index?

2 posts, 1 answers
  1. Nick Wu
    Nick Wu avatar
    22 posts
    Member since:
    Aug 2005

    Posted 14 Apr 2010 Link to this post

    in my webpage , I do not set  z-index to all elements.

    but in IE6, RadMenu's Drop List is shown behind DIV. 

    In IE8,  I use RadWindow  as Modal Dialog, but the Window can't override this Menu.

    my page :(sorry,it's so long)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <style type="text/css">
            html, body
            {
                overflow: hidden;
                height: 100%;
                margin: 0;
                padding: 0;
                font: 13px Georgia, Arial, Simsun;
            }
            html
            {
                _padding: 92px 0;
            }
            #divPageHead
            {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100px;
                background: #EFF3FB;
            }
            #divPageMenu
            {
                position: absolute;
                top: 70px;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
            }
            #divPageFoot
            {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 30px;
                background: #EFF3FB;
            }
            #divPageBody2
            {
                position: absolute;
                top: 140px;
                right: 0;
                bottom: 40px;
                left: 0;
                overflow: hidden;
                width: 100%;
                _height: 100%;
            }
            #divPageLeft2
            {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                overflow: auto;
                width: 240px;
                _height: 100%;
                background: #EFF3FB;
            }
            #divPageRight2
            {
                position: absolute;
                _position: static;
                top: 0;
                right: 0;
                bottom: 0;
                left: 250px;
                overflow: auto;
                _overflow: hidden;
                _height: 100%;
                _margin-left: 250px;
                background: #EFF3FB;
            }
            #divRightContent2
            {
                _overflow: auto;
                _width: 100%;
                _height: 100%;
            }
            #divPageBar2
            {
                position: absolute;
                top: 110px;
                left: 0;
                right: 0;
                height: 30px;
                width: 100%;
                overflow: hidden;
                z-index: 10;
            }
            #divPageLeftHd2
            {
                position: absolute;
                top: 0;
                left: 0;
                width: 240px;
                height: 30px;
                background: #F00;
            }
            #divPageRightHd2
            {
                position: absolute;
                _position: static;
                top: 0;
                left: 250px;
                right: 0;
                height: 30px;
                _margin-left: 250px;
                background: #FF0;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="divPageHead">
            <div style="height: 70px">
                some text
            </div>
            <div id="divPageMenu">
                <telerik:RadMenu ID="mainMenu" runat="server" CausesValidation="False" EnableViewState="False"
                    PersistLoadOnDemandItems="False">
                </telerik:RadMenu>
            </div>
        </div>
        <div id="divPageBar2">
            <div id="divPageLeftHd2">
            </div>
            <div id="divPageRightHd2">
            </div>
        </div>
        <div id="divPageBody2">
            <div id="divPageLeft2">
            </div>
            <div id="divPageRight2">
                <div id="divRightContent2">
                </div>
            </div>
        </div>
        <div id="divPageFoot">
            Copyright &copy;(2010)
        </div>
        </form>
    </body>
    </html>

  2. Answer
    Peter
    Admin
    Peter avatar
    6637 posts

    Posted 15 Apr 2010 Link to this post

    Hello Nick Wu,

    You need to set the z-index of RadMenu or its container to some large enough value. In addition to this, set position:relative for the element which wraps the menu. I suggest you review the following articles to get a better understanding of how the z-index property works:

    http://blogs.telerik.com/atanaskorchev/posts/09-07-02/z-index_demystified.aspx

    http://www.telerik.com/help/aspnet-ajax/controlling-absolute-positioning-with-zindex.html


    Best wishes,
    Peter
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top