How do I position something so that it doesn't affect other content?

[OM2]

How do I position something so that it doesn't affect other content?

I have a div, and inside I want to put an 'edit' button at the top, but I don't want the placement of that edit button to effect anything else.

I've got something like this:

<div>
<a class="dontMove">Edit</a>
Other things, like text
Like pictures
These should not move!
</div>

My CSS is:

a.dontMove,
a.dontMove:link,
a.dontMove:visited
{
 position: relative;
 z-index: 2;
 left: 2px;
 top: 2px;
}
a.dontMove:hover,
a.dontMove:active
{
 position: relative;
 z-index: 2;
 left: 2px;
 top: 2px;
}

What am I doing wrong?

Thanks.


OM

[scragar]

the only way to break something out of the box model is to use

position: absolute

[OM2]

thanks for the reply.
tried that.
but it takes the absolute point to be the start of the page - i.e. the top left corner.
how do i make it absolute to the place where it's being put inside - i.e. a div?
thanks.

[scragar]

remove your positioning, use margins to position it(top and left unless your aligning it in some other way, negatives = up/left, positives = down/right)

[OM2]

erm: even if i do that, just the fact that i have one itm next to the other pushes the next item right or down.

the first item will be and 'edit' link.
what i will do afterwards is allow the user to see the real version without the 'edit' links - i.e. show the html page with the 'edit' links removed.

surely if i use margins, then when the 'edits' are removed: this will mess up my formatting?

let me know what u think.

thanks.