html.de - Konflikt mit display:table und position:absolute

by SpiceLab

HTML

<body>
    <div id="menu">menu</div>
    <div id="blackLayer">blackLayer</div>
    <div id="table">
      <div id="sidebar">sidebar</div>
      <div id="content">content</div>
    </div>
</body>

CSS

html, body, #table {
    width: 100%;
    height: 100%;
}

#table {
    display: table;
    table-layout: fixed;
}

#menu {
    display: none;
    background: #28292D;
    width: 200px;
    position: fixed;
    left: -300px;
    top: 0;
    height: 100%;
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
    z-index: 3;
}

#blackLayer {
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
    height: 1265px;    
}

#sidebar {
    display: table-cell;
    vertical-align: top;
    width: 223px;
    background: #3d464d none repeat scroll 0 0;
}

#content {
    display: table-cell;
    vertical-align: top;
    background: #f0f0f0;
}