Question

尝试使用顶部和侧面菜单创建页面。

我已经实现了菜单结构，但我无法在顶部菜单下滚动页面内容。目前，它流过顶部。

CSS

body
{
left: 0px;
top: 0px;
right: 0px;
}

.fix-top-table {
 position: fixed;
 left: 0;
 top: 0;
 border-bottom: 1px #39F solid;
 max-width: 100%;
 width: 100%;
 height: 60px;
 padding: 0px;
 }

.fix-left-table
{
  position:fixed;
  left: 0;
  top: 60px;
  border-right: 1px #39F solid;
  width: 150px;
  height: 100%;
}

#page-content
{
    position: absolute;
    left: 160px;
    top: 70px;
}

HTML

<table class="fix-top-table">
<tr>
    <td>
        This is the top table
    </td>
</tr>
</table>

<table class="fix-left-table">
<tr>
    <td>
        This is the side table
    </td>
</tr>
</table>

<div id="page-content">     
    Content<br />
    Content<br />     
</div>

我正在使用桌子，因为我个人觉得它们更容易使用（恐龙）

http://jsfiddle.net/6xmgrsyf/

我尝试过z-index，将位置改为固定，似乎没有什么可以破解它。

非常感谢

约翰

Answer 1

您没有看到效果，因为您没有设置背景颜色：它还需要z-index ......

   z-index:1;
   background-color:#fff;

将此添加到.fix-top-table并且它将起作用。

这是您更新的FIDDLE

Answer 2

您忘记添加background-color，这使顶级菜单透明。

纠正你的css ..

.fix-top-table {
  position: fixed;
  left: 0;
  top: 0;
  background-color:red;
  color:white;
  z-index:1030;
  border-bottom: 1px #39F solid;
  max-width: 100%;
  width: 100%;
  height: 60px;
  padding: 0px;
}

Answer 3

尝试新的CSS，

ContextLoaderListener

添加z-index：1;对于#page-content和添加背景：白色;的z-index：10; for .fix-top-table

Answer 4

谢谢你们。

添加了bg color和z-index：1

完美无缺。

再次感谢

如何使页面内容在顶部div下流动

4 个答案: