Абсолютная позиция div - сделайте так, чтобы она придерживалась вправо

Question

Я установил некоторую абсолютную позицию div следующим образом:

left: 700px;

Но когда я изменяю размер браузера, мой div, конечно, не двигается.Как я могу установить его положение для перемещения вправо и перемещения влево при изменении размера окна?

Чтобы показать ситуацию, посмотрите на этот сайт .Посмотрите на слайдер изображения и стрелку справа от него.Это стиль:

#slides .next,#slides .prev {
    top:165px;
    left:-20px;
    width:24px;
    height:43px;
    display:block;
    z-index:999;

    position: absolute;
}

#slides .next {
    left: 700px;
}

А теперь попробуйте изменить размер окна с помощью этого ползунка.Моя стрелка останется в той же позиции, но должна переместиться влево с фоном слайдера.

Ничего, связанного с: float: right; right: 0px; и т. Д. Не работает.

Answer 1

• Удалить left: -20px; из #slides .next, #slides .prev (вы можете переместить его в .prev)
• Удалить left: 700px; из .next
• Добавить right: 0 к .next.

И вуаля, ваш .next всегда будет корректироваться справа от #slides (который имеет position: relative).

Answer 2

Не могли бы вы использовать «right: ### px» для позиционирования элемента вместо left?Если вам нужно, чтобы он располагался абсолютно с правой стороны вашего контента, а не с правой стороны окна, поместите его в контейнер:

<div style="position:relative; width:900px; height:90px; margin:10px auto;">
    <p>Some arbitrary content.</p>
    <div style="position:absolute; top:20px; left:20px;">Absolutely positioned left content</div>
    <div style="position:absolute; top:20px; right:20px;">Absolutely positioned right content</div>
</div>