html - 没有CSS位置属性的重叠父div

Question

有一个主要问题我无法解决，它与以下问题有关。

我有一个 div .content 我所有的内容都放在这里，并由第一个 div 格式化。内容可以是也可以是另一个 div、表格或纯文本。 但是，我还希望允许样式 .breaking-content 可以覆盖父 div .content 的样式属性。默认情况下，中断内容应在文档流中。

在这种情况下，我特别希望内部 .breaking-content div 能够与父 div .content 重叠。这可以通过 position: absolute; 使用 CSS 实现。但是我遇到了另一个问题，因为 .breaking-content 不再出现在文档流中，因为它与 .breaking-content + * 重叠 - 因为绝对定位。

html, head, body {
    margin: 0;
    padding: 0;
}

p.textual {
    font-size: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.main-content {
    width: 100%;
    background-color: #886632;
    margin: 0;
    padding: 0;
}

.content {
    width: 50%;
    margin: 0 auto;
    background-color: #FF8632;
}

.breaking-content {
    width: 100%;
    background-color: #44F632;
    position: absolute;
    left: 0;
    right: 0;
}

.breaking-content + * {
    /*Select first element after breaking content*/
    background-color: #5518F9
}

<div class="main-content">
        <div class="content">
            <p class="textual">Bacon ipsum dolor amet jowl short loin sausage beef ribs fatback pastrami t-bone hamburger turducken meatloaf frankfurter strip steak.</p>
            <div class="breaking-content">Alcatra flank hamburger tenderloin frankfurter bresaola t-bone ground round boudin pig short loin kielbasa bacon beef.</div>
            <p class="textual">Boudin meatloaf short ribs alcatra andouille tail drumstick tongue porchetta hamburger shoulder shank beef.</p>
            <p class="textual">Bacon ipsum dolor amet jowl short loin sausage beef ribs fatback pastrami t-bone hamburger turducken meatloaf frankfurter strip steak.</p>
            <div class="breaking-content">Alcatra flank hamburger tenderloin frankfurter bresaola t-bone ground round boudin pig short loin kielbasa bacon beef.
        </div>
            <span class="textual">Prosciutto leberkas sausage picanha, meatball flank chicken t-bone frankfurter.</span>
</div>
</div>

http://jsfiddle.net/29fdocqo/1/

我想不用 javascript 来解决这个问题，但如果不可能，我还是会使用它。

Answer 1

我不明白你为什么不关闭 .content。然后在这样之后重新启动它。

jsfiddle

更新:

抱歉，我回去给你找到了另一个解决方案。

.breaking-content {
    width: 200%;
    background-color: #44F632;
    margin-left: -50%;
}

Jfiddle