Is it possible to make something absolutely relative in relation to css positioning?

Question

I am trying to position an element on my page but would like it to be positioned both relatively and absolutely (stay with me, I know that doesn't make sense).

What I really want is a way of positioning this element that takes a hybrid of functionality from both the relative and absolute positioning.

So in my case I want this element to be positioned say 10px higher than its initial position, for this relative works fine, but we get a nasty white space where it should have been. So as-well as moving it up 10px relatively I would also like it to come off the page like an element that has been absolutely positioned.

Now before you say "just use absolute and position it there" I have quite a large page and by positioning something like this I would use huge number that would be thrown way out if the screen size changes.

So, to summarize I want to place this relative to its original position but also pull it off the page like absolute positioning, is this possible?

Answer 1

Perhaps this'll help?

#myElem {
    position:      relative;
    top:           -10px;
    margin-bottom: -10px;
}

This'll move the element 10px up, and also move its lower border 10px up, eliminating the space below it.