如何獲得圖像元素的絕對定位？

我在圖像元素的頁面上顯示了一些圖像。但是，如果屏幕分辨率不同，他們會移動到頁面上的不同位置。如何獲得圖像元素的絕對定位？

我該如何編寫下面的代碼，以便我的div /元素將保持絕對定位，並且不會在不同的分辨率下進行更改？

<div class='imageElement2'> 
<a href='#' title=''><img alt='' height='364' src='http://farm8.staticflickr.com/7209/6978440877_10b1fcffc4_o.jpg' width='940'/></a> 
</div> 

<style> 
.imageElement2 { 
width:1020px; height:400px; overflow:auto; 
position:absolute; z-index:2; left:50%; top:0%; 
margin-left: -510px; margin-top:40px; text-align:center; 
visibility:visible;} 
</style>

來源

2012-03-13 user1266068

我不太確定你想達到什麼目標，特別是'margin-left：-510px'。現在發生了什麼？你可以發佈一些screnshoots和你想要的圖表嗎？也許是一個jsfiddle？ – 2012-03-13 11:15:41

「margin-left：-510px」是我的圖片在網站上的位置，這有什麼奇怪的地方？ – user1266068 2012-03-13 11:19:25

你可以使用「position：relative」而不是絕對的。 – 2012-03-13 11:28:34

如果我理解正確的話，最好的辦法是在寬度和高度，使包裝分度，在這個div元素不會改變頁面寬度的影響，你只會得到一個卷軸。

這應該做的伎倆，只是將它附加到包裝元素。

.imageWrapper { width: 500px; }

然而，你想要什麼的篩選器，將是偉大的！

來源

2012-03-13 11:17:26

確定抓取圖像的鏈接，以便您可以看到我的問題一秒 – user1266068 2012-03-13 11:30:04

好的，這是我的網站的頂部應該是這樣的：http://i40.tinypic.com/15bjuw.png – user1266068 2012-03-13 11:36:00

這是一個例子有時會發生什麼：http://i42.tinypic.com/5lv21t.png – user1266068 2012-03-13 11:36:45

卸下

left: 50%; top: 0%;

，並用一個固定的PX含量替換它們像

left: 50px; top: 0px;

因爲50％是指在瀏覽器區域的寬度的50％的位置。

所以你看，一個1024屏幕上的格將在512和1366屏幕上的格將在683

提示：如果想在任何瀏覽器中的「絕對」定位切勿使用％。

提示：如果您正試圖定位在屏幕中間的DIV只是將這些樣式

width: your-desired-width-on-any-browser px; 
margin: auto; //to bring it middle 
//additionally you can add "top: X px/%/em; to position it vertically.

有一個好的一天。

來源

2012-03-14 08:45:51

我明白了，你說得對，我不應該在那裏有「％」。然而，我試圖修復它，當我從其他計算機查看我的網站時，或者當我使用「ctrl」+「滾動輪」具有相同的效果時，我的圖像仍在四處移動...是否可以讓圖像保持放置狀態？似乎每個瀏覽我的網站的人都不會按照我希望的方式看到它，如果他們有不同的顯示器分辨率......; – user1266068 2012-03-14 14:22:23

您可以使用position：fixed在你的樣式中。任何方式，你可以給你喜歡的網站，你完全有這個「問題」。這將是很好的。 :) – 2012-03-15 13:19:04

如何獲得圖像元素的絕對定位？

回答

相關問題