Menu z-index, hidden behind absolute positioned div

3 posts, 1 answers
  1. HSO
    HSO avatar
    17 posts
    Member since:
    Sep 2006

    Posted 03 Apr 2013 Link to this post


    I have a layout page with 4 absolute positioned divs, Header 1, Header 2, Content, and Footer.
    Header 1 & 2, and Footer are sticky divs, only the Content div can scroll vertically.

    I put the Menu on Header 1, the expanded menu is hidden behind the Header 2.
    Here is my html layout

    <!DOCTYPE html>
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo.default.min.css" rel="stylesheet" />
        <link href="styles/layout.css" rel="stylesheet" />
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
    <div id="secHeader1">
        header 1
        <div style="width: 120px; float:right;">
            <ul id="menu">
                $(document).ready(function() {
    <div id="secHeader2">
        header 2
    <div id="secContent">
        content body
    <div id="secFooter">

    and here is the Layout.css

    * {margin:0; padding:0;}
    html, body, form {margin:0; padding:0; height: 100%; color:#ffffff;}
    html>body>form {position:absolute; width:100%;}
    #secHeader1 {
    position:absolute; overflow:hidden;  
    width:100%; height:75px;
    left:0; top:0px; background-color:#8a0000;}
    #secHeader2 {
    position:absolute; overflow:hidden;  
    width:100%; height:75px;    
    left:0; top:75px; background-color:#666666;}
    #secContent {
    position:absolute; overflow:hidden;  
    left:0; top:150px; bottom:31px; background-color:#0c0c0c;}
    #secFooter  {
    position:absolute; overflow:hidden;  
    width:100%; height:30px;    
    left:0; bottom:0;                  
    background-color:#606060; border-top:1px solid #a0a0a0;}
    I've tried to set z-index on secHeader1, .k-menu .k-animation-container, etc, none of them worked.

    Please advise.
    Thank you
  2. Answer
    Kamen Bundev
    Kamen Bundev avatar
    1532 posts

    Posted 04 Apr 2013 Link to this post

    Hi Jason,

    You've placed the Menu in a container with overflow: hidden, which will hide it. Since you have a set height, you can remove the overflow: hidden and the Menu will start showing up properly.

    All the best,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. HSO
    HSO avatar
    17 posts
    Member since:
    Sep 2006

    Posted 04 Apr 2013 Link to this post

    thank you so much!  that fixed.
Back to Top