html - 如何在图像元素上获得绝对定位？

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

删除

left: 50%; top: 0%;

并用固定的 px 级别替换它们，例如

left: 50px; top: 0px;

因为 50% 表示位于浏览器区域宽度的 50% 的位置。

所以你看，在 1024 屏幕上，div 将为 512，而在 1366 屏幕上，div 将为 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.

祝你有美好的一天。