始终将容器定位在顶部答案

【问题标题】：Positioning a container always on top始终将容器定位在顶部
【发布时间】：2013-03-11 12:32:55
【问题描述】：

我有一个插件，我在其中提供了一个简单的 div 容器，该插件通过 javascript 在容器内创建各种 dom 元素。插件创建的基本结构是这样的：

Wrapper Div (Position:Relative)
   - Left Container (Position: Absolute)
        - Left Top sub-container (Position: Absolute)
   - Right Container (Position: Relative)
        - Right Top sub-container (Position: Absolute)
        - Right Sub-Container frame with absolute items (Position: Relative)

这是我为插件创建的完全相同的结构创建的小提琴：http://jsfiddle.net/FsYt8/

我这里面临的问题是，当内容溢出时，可以用鼠标滚轮滚动内容（如fiddle）。但是，当我向下滚动时，我希望上面两个左上角和右上角的子容器（红色/蓝色条）颜色保持在顶部本身而不是随着内容向下滚动。

插件在container-right-frame div 内创建dom 元素并将元素定位为绝对位置（然后根据container-right 的顶部/左侧定位）。如何实现上述两个条的固定定位？

【问题讨论】：

编辑了小提琴的链接

标签： javascript html css position containers

【解决方案1】：

使标题固定并相应地定位它们：

http://jsfiddle.net/QYCra/

将列的初始高度向下移动，使其从标题下方开始：

.frame {width:924px;height:300px;position:relative;overflow-x:hidden;}
.axis-left {width:303px;height:34px;position:fixed; top:0; background-color:blue;z-index:2;}
.axis-right {width:615px;height:34px;position:fixed; top:0; left:310px; background-color:red;z-index:2;}
.container-left {height:340px;width:303px;top:30px; left:0px;position:absolute;background-color:green;z-index:1;overflow:hidden;}
.container-right {height:340px;width:615px;top:30px; left:304px;position:relative;overflow:hidden;background-color:yellow;z-index:1;}

【讨论】：

这些条的定位部分位于插件内部。所以，如果我将条形的位置标记为固定，我如何检查这些应该放置在哪里？当我签入调试器（检查元素）时，该栏实际上走出了frame 容器并来到页面顶部
我的意思是你在这里看到的栏也是由我制作的插件生成的。 Frame 容器在页面上相对定位，条形图通过 JavaScript 生成并由 frame.appendChild(barX) 定位为绝对值。如果我将 barX 或 barY 的位置更改为fixed，我将不知道该条的top 和left 位置？我该如何解决？
那么，我认为您需要为列制作一个单独的滚动容器？听起来对吗？一个滚动页面，一个滚动框架列？

【解决方案2】：

您可以将红色和蓝色 DIV 固定并浮动到左侧。右侧 DIV 的左边距将调整 DIV 的 x 轴位置，如下所示：

.frame {width:924px;height:300px;position:relative;overflow-x:hidden;}
.axis-left {float:left;width:303px;height:34px;position:fixed;background-color:blue;z-index:2;}
.axis-right {float:left;margin-left:305px;width:303px;height:34px;position:fixed;background-color:red;z-index:2;}
.container-left {height:340px;width:303px;left:0px;position:absolute;background-color:green;z-index:1;overflow:hidden;}
.container-right {height:340px;left:304px;position:relative;overflow:hidden;}
.container-right-frame{
    position:relative;top:34px;background-color:yellow;z-index:1;width:615px;
}

【讨论】：