This is a migrated thread and some comments may be shown as answers.

Menu z-index, hidden behind absolute positioned div

2 Answers 778 Views

This is a migrated thread and some comments may be shown as answers.

HSO asked on 03 Apr 2013, 09:44 PM

menutest.png

menutest.zip

Hello:

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>

<html>

<head>

<title></title>

<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>

</head>

<body>

<div id="secHeader1">

header 1

<div style="width: 120px; float:right;">

<ul id="menu">

<li>

Products

<ul>

<li>Furniture</li>

<li>Decor</li>

<li>Storage</li>

<li>Lights</li>

</ul>

</li>

</ul>

<script>

$(document).ready(function() {

$("#menu").kendoMenu();

});

</script>

</div>

<div id="secHeader2">

header 2

</div>

<div id="secContent">

content body

</div>

<div id="secFooter">

footer

</div>

</body>

</html>

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;

width:100%;

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 Answers, 1 is accepted

Accepted