2011-09-06 106 views
27

我有一個頁面上的兩個div元素。 如何讓一個div浮在另一個彈出窗口上?使一個div浮動另一個

+1

嗯......我想你想要使用[lightbox](http://leandrovieira.com/projects/jquery的/收藏夾/)。 – Cygnusx1

回答

27

使用position:absolute;並將「彈出」一個設置爲位於另一個的邊界內。 「popup」div應該也可能更小。

使用z-index將「彈出」一個放在另一個之上(給它一個較高的值爲z-index)。

如果您想讓內部div看起來像是真正漂浮在另一個之上,請創建一個類似border-right:2px solid blackborder-bottom:2px solid black的陰影。

如果你想讓它實際彈出/出現/消失,你將需要使用一些腳本。

+0

如何在指定其位置爲絕對位置後添加「偏移量」?這是不可能的,因爲它將新座標視爲絕對座標,因此它變得毫無用處。但顯然它應該可以指定一個偏移量,因爲即使它是「絕對」它不顯示在(0,0) – pete

+0

我能夠使用以下方法解決我的問題: var l = blah.offset()。剩下; blah.offset({left:l + 10}); – pete

3

然後使用CSS的Z-index屬性是這樣的:

div1 { 
    z-index:1000; 
} 

div2 { 
z-index:1001; 
} 

最高z索引元件將在頂部顯示。

7

我認爲將position設置爲fixed將使其保持可見狀態,即使用戶滾動。您可以使用「頂部」,「左側」和「右側」屬性來設置位置。我使用的「測試版」標識的CSS基本上是你要求的是這樣的:

.fixed{ 
    position:fixed; 
    top:0px; 
    right:0px; 
    width:100px; 
}