イメージ要素の絶対位置を取得する方法は？

Question

画像要素のページに画像を表示しています。しかし、画面の解像度が異なると、ページ上の別の場所に移動します。

私の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> 

Answer 1

私はそれを正しく理解していれば、最良の方法は、このdiv要素内の要素は、ページの幅を変更することにより、影響されることはありません、幅と高さにして、ラッパーのdivを作成することです、あなただけのスクロールを取得します。

これはトリックを行い、ラッパー要素に追加するだけです。

.imageWrapper { width: 500px; } 

しかし、あなたが望むもののスクリーダポンプは素晴らしいでしょう！

Answer 2

left: 50%; top: 0%; 

を削除し、50％がブラウザ領域の幅の50％の位置を意味するので

left: 50px; top: 0px; 

ような固定PXレベルに置き換えます。

だから、DIVは512になりますと、1366画面上のdivには683

ヒントになります1024の画面上で、以下を参照してください。任意のブラウザの「絶対的」な位置決めをしたい場合は％を使用しないでください。

ヒント：あなたが画面の中央に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. 

は良い一日を適用します。