负边距影响同一级别的绝对定位 div

Question

我有一个#left，绝对定位的 div 和右侧的 2 个其他 div。当我向右侧的#top div 添加边距时，它也会影响#left div。我知道有一个边距崩溃的东西，但它是否也会影响position:absolute？

代码真的很简单，没什么特别的，但是找不到解决办法。

* {
    padding:0;
    margin:0;
}

#wrapper {
    width:400px;
    height:400px;
    background:gray;
    position:relative;
    margin-left:100px;
}

#left {
    background:pink;
    width:100px;
    height:100%;
    left:-100px;
    top:0;
    position:absolute;
}

#right {
    background:red;
}

#top {
    background:green;
    height:26px;
}

<div id="wrapper">
    <div id="left">Left</div>
    <div id="top">top</div>
    <div id="right">Right</div>
</div>

Jsfiddle：http://jsfiddle.net/9thvLfe0/2/

Answer 1

只需将其添加到#top：

float:right;
width:100%;

JSFiddle

Answer 2

只给顶部的边距，给左边的负边距。

Answer 3

嗯，问题是你的#wrapper 是相对的，而#left 是绝对的。 通过继承，#top 和#right 也是相对的。因此，在这些条件下向顶部添加负边距，它会将其添加到#wrapper。

您可以将#wrapper 更改为“固定”位置，但您必须手动将边距/填充设置为#hide-top，因为事实上，他将隐藏在#wrapper 下。除非你这样设置：

#hide-top {
    position: relative;
    top: 400px;
}

然而，我的解决方案不是更改您的 CSS，而是更改您的 JQuery。您可以使用 hide() 函数隐藏#top。例如，请参阅我的JSFiddle ;)。