css - 父 div 被子推动，在父 div 中产生间隙

Question

我有我的主 div，在那个里面我有另一个 div，在那个里面我有另一个 div。我想要做的是让最后一个 div 在它的父母之外“浮动”，这是我想要突出主 div 的徽章。这不起作用，我想要它，主 div 被扩展但背景颜色甚至没有覆盖那些像素，我可以看到它背后的身体背景！

这是我的代码：

#main {
    background-color: #000;
    outline: 1px solid #fff;
    width: 840px;
    padding: 20px 60px 20px 60px;
}

#nested1 { 
    width: 100%;
    position: relative;
    margin: 0px 0px 10px 0px;
    }

#nested2 {
    position: absolute;
    top: 100px;
    right: -80px;
    }

Answer 1

The #main div won't expand unless there's some content inside it to make it stretch, so that sounds like the first problem. (The bit of background you are seeing is due to the padding on the #main div.)

If you want #nested2 positioned in relation to #main, it's better to give position: relative to #main than to #nested1.

Without seeing your whole setup (e.g. HTML) this is a bit of a guessing game. Could you post your whole page code, or a test page on a site like jsFiddle?