Relative-absolute positioning?

I'd 开发者_JAVA技巧like to position something relatively absolutely, e.g. taking it out of the document flow and adjusting its position a few pixels. What's a neat way to do this?

Just use margin to shift the absolutely positioned element.

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; }

Demo: jsfiddle.net/KXCkV

You could put your relatively positioned item within an absolutely positioned container and use top, left, right, or bottom to move it wherever you need to.

This is an example of what you need to do:

<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>

Only way I could think to do this is to have the element styled in the document on page load and then finding its position and changing the style to position:absolute, setting the top: and left: properties programatically based on it's original location.