定位一個容器總是在頂部

我有一個插件，其中我提供了一個簡單的div容器，該插件通過javascript在容器內部創建了各種各樣的dom elemnents。該插件創建的基本結構是這樣的：定位一個容器總是在頂部

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的頂部/左側進行定位）。我如何才能達到上述兩個柱的固定位置？

來源

2013-03-11 Cipher

Editted鏈路撥弄 – Cipher 2013-03-11 12:36:34

使頭固定並據此定位：

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

來源

2013-03-11 12:38:00 Lowkase

這些條的定位部擱置在插件內：右邊DIV左邊界將如下調整DIV的x軸位置。所以，如果我將這些酒吧的位置放在固定的位置，我該如何檢查這些酒吧應該放置在哪裏？當我檢查調試器（inspect元素）時，實際上它會從'frame'容器中出來並進入頁面的頂部 – Cipher 2013-03-11 12:39:41

不確定我完全理解你在這裏提出的問題... – Lowkase 2013-03-11 12:41:51

我的意思是，你在這裏看到的也是由我製作的插件生成的。「框架」容器相對於頁面定位，條形圖通過JavaScript生成並通過「frame.appendChild（barX）」絕對定位。如果我將barX或barY的位置更改爲「固定」，我不知道酒吧的「頂部」和「左側」位置？我該如何解決這個問題？ – Cipher 2013-03-11 12:46:16

可以使紅色和藍色DIV固定並將它們浮動到左側。

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

來源

2013-03-11 12:52:29

定位一個容器總是在頂部

回答

相關問題