固定一個div到一定位置（保持固定的窗口大小調整）

請參考我的網站Vault X 固定一個div到一定位置（保持固定的窗口大小調整）

我一直在試圖讓旁邊的保管庫可點擊功能燈的開關。

但是，我無法讓我的div保持固定在這個位置（調整窗口大小導致它移動）。

達到此目的的最佳方法是什麼？

2012-04-25 Sean Zulu

由於您的圖形固定在頁面的水平中心，因此可以使用相同的中心，然後使用偏移。

#switch { 
    height:50px; 
    width:50px; 
    background: #F00; /* Just so we can see it */ 
    position: absolute; 
    top: 150px; 
    left: 50%; /* Put the left edge on the horizontal center */ 
    margin-left: 148px; /* Move it 148px to the right of the horizontal center, placing it over the lightswitch */ 
}

來源

2012-04-25 14:34:57 rgthree

如果我然後調整窗口左側的大小，元素仍然會移動。 – 2012-04-25 14:37:11

它會移動，但與中心一樣，圖形。當您調整窗口寬度時，它仍然會放置在圖形中的lightswitch上。 – rgthree 2012-04-25 14:38:25

它仍然移動調整大小，但我想出了創建交換機作爲一個單獨的圖像的解決方案，所以如果位置稍微關閉也無關緊要。 – 2012-04-25 15:26:27

（與position:fixed）瀏覽器窗口在這種情況下（和總是）做position:absolute（或更適當地在這裏position:fixed）指定相對於文件的到具有比靜態其他的位置上的第一個親本的正常流動之外的元件位置。

因此，既然你已經指定了一個頂部和一個正確的位置，這些值是固定的。當您將右邊框移入時，與瀏覽器視口的距離必須保持不變，以便元素移動。

您可以從左側嘗試定位，但只會針對從右側調整後衛（如果我拖到左邊的角落，該元素將移動）

另外，您應該靜態中的位置這個元素文檔，在您的#wrapper div中，以便調整窗口大小對文檔流沒有影響。

來源

2012-04-25 14:30:32

你需要做的是，想想你想要的元素被（固定將堅持在一個座標位置什麼X/Y，絕對的，會隨着文件移動，相對是很清楚相對於在哪兒）。

所以隨着中說，我會建議創建一個使用

<div style="position: relative;" class="anchor-point"> 
    <div style="position: absolute; top: 100px; right: 50px;"> 
    <img href="" /> 
    </div> 
</div>

的anchor-point意味着你可以在你的頁面，內部部分的面積堅持這個元素，position:absolute;使您可以移動的「錨點」從你的錨點到你想要的任何地方（上/右/左/下），將它與z-index結合起來，就可以將你的元素疊加到你想要的位置上。

這將保證您的元素（即pos：abs）將保留在您想要的位置。

來源

2012-04-25 14:41:15 Jakub

固定一個div到一定位置（保持固定的窗口大小調整）

回答

相關問題