Question

我有一个#left，绝对定位的div和右侧的另外两个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更改为＃34; fixed＆＃34;但是您必须手动将边距/填充设置为＃hide-top，因为实际上，它将隐藏在#wrapper下。除非你这样设置：

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

然而，我的解决方案并不是改变你的CSS而是你的JQuery。您可以使用hide（）函数隐藏#top。例如，请参阅我的JSFiddle。）。

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

3 个答案: