Remove from normal flow and set relative position to itself

Question

<div id="foo">
    <div></div>
    <div id="bar"></div>
    <div></div>
</div>

How do you get top of "bar" to be positioned -5px relative to its original position and also removed from the normal flow?

Attempt 1

#bar {
    position: relative;
    top: -5px;
}

Doesn't work since "bar" is not removed from normal flow

Attempt 2

#foo {
    position: relative;
}
#bar {
    position: absolute;
    top: -5px;
}

Doesn't work since top of "bar" is placed -5px relative to "foo"

Answer 1

Try

#bar {
    position: absolute;
    margin-top: -5px;
}

See this live example