Относительно-абсолютное позиционирование?

Question

Я бы хотел позиционировать что-то относительно абсолютно, например, вынуть его из потока документов и отрегулировать его положение на несколько пикселей. Какой изящный способ сделать это?

Answer 1

Просто используйте margin для смещения абсолютно позиционированного элемента.

HTML:

<p>Lorem ipsum dolar sit amet.</p>
<p class="move">Lorem ipsum dolar sit amet.</p>
<p>Lorem ipsum dolar sit amet.</p>

CSS:

p.move { color:red; position:absolute; margin:5px 0 0 5px; }

Демонстрация: jsfiddle.net / KXCkV

Answer 2

Вы можете поместить свой относительно позиционированный предмет в абсолютно позиционированный контейнер и использовать верхнюю, левую, правую или нижнюю часть, чтобы переместить его туда, куда вам нужно.

Answer 3

Это пример того, что вам нужно сделать:

<div style="position: relative; width: 500px; height: 200px;">
    <div style="position: absolute; left: 0; top: 0;">Upper Left</div>
    <div style="position: absolute; right: 0; bottom: 0;">Lower Right</div>
</div>

Answer 4

Единственный способ, которым я мог бы подумать, это сделать стиль элемента в документе при загрузке страницы, а затем найти его положение и изменить стиль на position:absolute, установив свойства top: и left: программно на основе это оригинальное местоположение.