Html 我想在菜单或顶部栏后分割/拆分页面屏幕

我想在顶部栏后分割页面，但它不会改变。我想设计一个有三个部分的页面，但该页面也包含菜单栏或标题栏。我试过下面这样的东西，但它没有显示在顶部酒吧的任何东西

身体{
字体系列：Arial；
颜色：白色；
}
.分开{
颜色：白色；
身高：80%；
宽度：30%；
位置：固定；
z指数：1；
排名：0；
溢出x：隐藏；
填充顶部：20px；
}
.左{
左：0；
背景色：#111；
}
.对{
右：0；
背景色：红色；
}
#顶{
身高：20%；
宽度：100%；
}
三个相等的列

一般来说，你不应该使用像这样的固定位置概念，但除此之外，你需要为

设置
顶部：20%
。拆分
部分以在顶部为顶部栏留出空间，另外，你不应该在白色背景上使用
颜色：白色
，因为这样文本将保持不可见（白色背景上的白色文本）



身体{
字体系列：Arial；
}
.分开{
身高：80%；
宽度：30%；
位置：固定；
z指数：1；
最高：20%；
溢出x：隐藏；
填充顶部：20px；
}
.左{
左：0；
背景色：#111；
}
.对{
右：0；
背景色：红色；
}
#顶{
身高：20%；
宽度：100%；
}
三个相等的列
您已使用
位置：固定
和
顶部：0
和
z-index:1
拆分类，该类将自动与顶部元素重叠。您可以将拆分类从顶部移动20%（
顶部：20%
）