在頁面內容上浮動div

我已經實現了一個彈出框來動態顯示搜索選項。我希望這個盒子能夠「漂浮」所有網站內容。目前，當顯示該框時，它將取代下面的所有內容，看起來很糟糕。在頁面內容上浮動div

我相信我已經嘗試將box的div的z-index設置爲高於剩餘頁面內容的z-index，但仍然沒有運氣。

來源

2010-01-05 Eric Di Bari

您可能想要谷歌「燈箱」，看看這種方法是否給你預期的效果。 – DOK 2010-01-05 13:14:20

問題中的URL給出404 – 2014-09-19 17:12:22

您想使用absolute positioning。

絕對位置元素是位於相對於具有比靜態以外的位置第一父元素。如果沒有找到這樣的元素，包含塊是 HTML

例如：

.yourDiv{ 
    position:absolute; 
    top: 123px; 
}

爲了得到它的工作，父需要是相對的（position:relative）

在你的情況應該這樣做：

.suggestionsBox{position:absolute; top:40px;} 
#specific_locations_add{position:relative;}

來源

2010-01-05 13:07:17 marcgg

謝謝，絕對定位解決了我的問題！ – 2011-08-05 07:05:47

@MrBoJangles更新了使用您的鏈接的答案。答案是4歲，這是一個不同的時間^^ – marcgg 2014-01-29 10:35:24

夫婦筆記：你確實需要指定一個頂部和/或左側的座標，或者這似乎不工作。另外要注意，如果你希望你的div「在屏幕上」，有時網頁並不總是顯示「0,0」作爲當前的左上角（即使它看起來像是），你可以用http：// stackoverflow來檢查。 COM/q /32453分之3464876。如果還有其他絕對定位的div，您可能還需要設置z-index。此外，如果有「全屏」選項，「頂部div」可能不會顯示，如果不是「全屏」div的子元素。 GL！ – rogerdpack 2016-10-14 07:23:38

使用

position: absolute; 
top: ...px; 
left: ...px;

要定位格。確保它沒有父級標籤，其位置是：relative;

來源

2010-01-05 13:03:46

也可能需要使用'z-index'。 – 2016-11-08 10:51:20

結果c ontainer div有position: relative這意味着它仍處於文檔流程中，並會改變其周圍元素的佈局。您需要使用position: absolute才能實現「浮動」效果。

您也應該檢查你使用的標記，你有幻象<li> s的無容器<ul>，你很可能有一個<ul>更換兩個div#suggestions和div#autoSuggestionsList，並得到想要的結果。

來源

2010-01-05 13:08:04 roryf

給z-index:-1閃爍，給z-index:100到div的..

來源

2011-01-21 09:13:06

是的，Z-指數越高，效果越好。它會將您的內容元素放置在頁面上每個其他元素的頂部。假設你的頁面上有一些元素有z-index。尋找最高的，然後給你的彈出式元素提供更高的z-index。通過這種方式，即使在z-index的其他元素上也會流動。如果你的頁面沒有任何元素的z-index，你應該像z-index：2;或更高的東西。

來源

2011-06-08 14:08:18 Serpico

在頁面內容上浮動div

回答

相關問題