css - 父 div 被子插入，在父 div 中产生间隙

Question

我有我的主 div，在那个里面我有另一个 div，在那个里面我有另一个 div。我想做的是让最后一个 div 在其父 div 之外“ float ”，这是我想要从主 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

#main div 不会展开，除非其中有一些内容可以拉伸(stretch)，所以这听起来像是第一个问题。 (您看到的背景部分是由于 #main div 上的填充所致。)

如果您希望#nested2 相对于#main 定位，最好给出position:relative于#main 而不是#nested1。

在没有看到您的整个设置(例如 HTML)的情况下，这有点像猜谜游戏。您可以在 jsFiddle 之类的网站上发布整个页面代码或测试页面吗？