CODEWITHSUNDEEP
htmlcsspositioning
Ry-
Ry-

Reputation: 224862

Relative-absolute positioning?

I'd 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?

Upvotes: 2

Views: 165

Answers (4)

Marcel
Marcel

Reputation: 28087

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

Upvotes: 5

dtbarne
dtbarne

Reputation: 8190

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>

Upvotes: 0

jaywon
jaywon

Reputation: 8234

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.

Upvotes: -1

livinzlife
livinzlife

Reputation: 873

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.

Upvotes: 2

Related Questions