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

Question

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

如何使“条形图”的顶部相对于其原始位置处于-5px的位置，并且也从正常流程中移除？

尝试1

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

由于未从正常流程中删除“栏”，因此无法正常工作

尝试2

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

由于“ bar”的顶部相对于“ foo”放置了-5px，因此无效

Answer 1

尝试

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

看到这个现场的例子