Позиционирование CSS относительно общей площади страницы

Question

Надеюсь, я могу это объяснить.

У меня есть изображение, которое «застревает» в правой части окна браузера, поэтому, когда окно браузера меняет размер, оно остается застревающим вправо. Стиль, который я использую:

style="position :absolute; top :4px; right :4px" 

У меня также есть минимальная ширина тела 1024px:

body 
{ 
    min-width: 1024px; 
} 

Это все прекрасно работает, пока окно не будет изменять размер меньше 1024, то изображение еще застрял в правой части окна. Но я хотел бы, чтобы он придерживался правой части общей площади страницы. Если вы понимаете, что я имею в виду.

Спасибо,

AJ

Answer 1

CSS-атрибут позиции расчитывает на основе позиционируемый родителя. Если ваше изображение не имеет родителей, которые расположены, то абсолют будет относиться к экрану. Вы должны это исправить, поставив позицию: relative; в вашем css для тела или путем обертывания всего в div правильного размера с позицией: relative;

Answer 2

Вы можете добиться успеха с помощью position: relative в DIV, содержащий изображение, с какой-то код, как это:

<div style="position:relative; min-width: 1024px"> 
    <div style="position: absolute; top: 10px; right: 4px; width: 20px; height: 20px; background-color: red"></div> 

    <div style="width: 1024px; margin: auto 0px; height: 400px; background-color: #AAA">&nbsp;</div> 
</div> 

Example here: http://jsfiddle.net/7jafS/