从正常流量中移除并设置相对位置

Question

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

如何将“bar”的顶部相对于其原始位置定位为-5px并从正常流程中移除？

尝试1

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

不起作用，因为“bar”未从正常流程中删除

尝试2

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

不起作用，因为“bar”的顶部相对于“foo”放置-5px

Answer 1

尝试

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

直播example

Answer 2

您可能需要执行以下操作：

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