CSS定位和滚动

我正试图得到一个左菜单和一个右横幅，并让它们保持固定位置时，中心面板滚动文本-横幅将不得不在顶部的中心面板由于大小-颜色方案是白色文本黑色背景，除了菜单是一个有自己的颜色方案

我对css比较陌生，所以可能已经对自己开了一个玩笑-我已经尝试过了，但目前右上角的横幅在滚动时保持不变，但是文本覆盖了它，左上角的菜单从屏幕上弹出

---

非常感谢您对我应该学习/查看的内容的任何帮助/评论/指导！从哪里开始？哈哈，你的代码几乎每行都需要修改。我这里有一个修改过的演示，但基本上，在定位元素时，您必须注意站点架构。组织就是一切，就是前端开发

---

请参见

首先，一旦开始使用position:absolute；或位置：固定；，使用float和margin变得无关紧要

另外，当使用top:x；，左：x；，右：x；，或底部：x；始终确保在您的价值中添加尺寸单位，即top:1；应为顶部：1px

如果我从您发布的css中理解正确，那么可以让您更接近您想要实现的目标：

html,body{ margin: 0; padding: 0; color: #fff; background: #000; height: 100%; width: 100%; overflow: hidden; }
#container { width:100%; height: 100%; text-align: left; overflow: auto; border: 1px red solid;} 
#mainContent { width: 90%; color: #fff; margin: 0 auto; }
#banner { background-color: #000; width:40%; top:1px; right:1px; position:fixed; }
#sidebarmenu { width: 10%; background: #000; padding: 15px 10px 15px 20px;top:1px;left:1px;position:fixed; }

看看我制作的这个JSFIDLE，看看这个css做了什么：

注意：您可能已经注意到我将html和主体的高度设置为100%。这是因为，除非您为html和正文设置了高度，否则页面上任何其他要100%生成的元素都将被展平

---

注2：请务必查看本网站及其CSS，以获得一个100%高度的内容容器和侧栏菜单示例：

您也可以发布html。以下是整个页面减去我使用的ipsum-编辑原始内容检查您的帖子，关于htmltook我有一段时间没有显示任何内容，添加了所有空格，并且超过了评论的字符限制-因此，编辑原文您应该选择一个答案；我目前使用了你的位，但我无法让文本从页面顶部下拉：xxx似乎不起作用，因为我提到你不能只使用一个数字作为顶部、右侧、底部或左侧的值。。。如果你想让你的容器降到200像素，你需要写top:200px；重点放在px上。主要内容-可以降低吗？200似乎没什么用。你是说文字？是的，现在我把它放在顶部：-150px；但这是相对的。每次定位固定的内容时，都希望将其内容相对于容器进行定位。所以基本上，文本是从父对象的底部向上150像素。设置的值越接近0px，就越接近容器的底部。有意义吗？你说的很有意义，但是文本在页面顶部结束，我在任何地方都看不到a-150。必须删除ul的css，因为它打破了定位，但我会很快重新做-文本流正是我想要的-菜单和横幅完美-但文本位于页面顶部注意到文本容器位于横幅顶部-因此此文本不是横幅的文本？这是实际的页面内容吗？

html,body{ margin: 0; padding: 0; color: #fff; background: #000; height: 100%; width: 100%; overflow: hidden; }
#container { width:100%; height: 100%; text-align: left; overflow: auto; border: 1px red solid;} 
#mainContent { width: 90%; color: #fff; margin: 0 auto; }
#banner { background-color: #000; width:40%; top:1px; right:1px; position:fixed; }
#sidebarmenu { width: 10%; background: #000; padding: 15px 10px 15px 20px;top:1px;left:1px;position:fixed; }