Как получить абсолютное позиционирование на элементах изображения?

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 деление будет на 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.

Хорошего дня.

Answer 2

Если я правильно понимаю, лучшим способом было бы создать div-обертку с шириной и высотой, при изменении ширины страницы элементы в этом div не будут затронуты, вы просто получите прокрутку.

Это должно сработать, просто добавьте его к элементу-обертке.

 .imageWrapper { width: 500px; }

Как бы ни было то, что вы хотите, было бы здорово!