负边距影响同一级别的绝对定位 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

只需给顶部留出边距，给左边留出相同的负边距。

Answer 2

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

您可以将#wrapper 更改为位置"fixed"，但您必须手动将margin/padding 设置为#hide-top，因为它会隐藏在#wrapper 下。除非你这样设置:

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

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

Answer 3

只需将此添加到#top 即可：

float:right;
width:100%;

JSFiddle

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

Negative margin affects the absolute positioned div on same level

html

css

css-position

absolute