Question

我有一个插件，我在其中提供了一个简单的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/

我在这里遇到的问题是，当内容溢出时，可以使用鼠标滚轮滚动内容（如小提琴）。但是，当我向下滚动时，我希望上面两个左上角和右下角的子容器（红色/蓝色条形）颜色在小提琴中保留在顶部，而不是向下滚动内容。

插件在container-right-frame div中创建dom元素，并将元素定位为绝对元素（然后根据container-right的top / left定位）。如何实现上述两种柱的固定定位？

Answer 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;}

Answer 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;
}

始终将容器放在顶部

2 个答案: