Html 不带css位置属性的重叠父div

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

我有一个div

.content

，我的所有内容都在其中，并由第一个div格式化。例如，内容也可以是另一个div、一个表或纯文本。 但是，我还希望允许样式

.breaking content

，它可以覆盖父div

.content

的样式属性。默认情况下，中断内容应该在文档流中

在这种情况下，我特别希望内部

.content

div能够与父div

.content

重叠。这可以通过CSS通过

position:absolute实现。但是，由于
，我遇到了另一个问题。由于绝对位置的原因，文档流中不再出现中断内容的问题，因为它与
重叠。中断内容+*


html，头，体{
保证金：0；
填充：0；
}
p、 文本的{
字体大小：12px；
填充顶部：12px；
垫底：12px；
}
.主要内容{
宽度：100%；
背景色：#886632；
保证金：0；
填充：0；
}
.内容{
宽度：50%；
保证金：0自动；
背景色：#FF8632；
}
.破坏内容{
宽度：100%；
背景色：#44F632；
位置：绝对位置；
左：0；
右：0；
}
.正在断开内容+*{
/*选择打断内容后的第一个元素*/
背景色：#5518F9
}

培根益普生肉馅多洛·阿梅特·乔尔短腰肉香肠牛排肥背熏牛肉t骨汉堡包turducken肉糕法兰克福牛排条
Alcatra侧翼汉堡里脊法兰克福bresaola t形骨绞圆布丁猪短里脊kielbasa培根牛肉。
Boudin肉糕短排骨恶魔岛安多维尔尾鸡腿舌波切塔汉堡肩胫牛肉
培根益普生肉馅多洛·阿梅特·乔尔短腰肉香肠牛排肥背熏牛肉t骨汉堡包turducken肉糕法兰克福牛排条
Alcatra侧翼汉堡里脊法兰克福bresaola t形骨绞圆布丁猪短里脊kielbasa培根牛肉。
意大利熏火腿leberkas香肠picanha，肉丸侧翼鸡肉t骨法兰克福。
我不明白你为什么不关闭
.content
。然后重新启动它


更新：

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

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

您的意思是希望
在文档流中分解内容，但样式不同吗？或者，您希望
.breaking content
像现在这样凌驾于流之上吗？只是想了解你的问题是什么。对不起，它应该在文档流中。你可能会注意到那些紫色/蓝色的框被一个绿色的div重叠。我希望那些蓝色的框完全可见。这确实是一个解决我还没有想到的问题的方法。但这并不能从整体上解决问题。在我的例子中，如果没有Javascript，我可能无法关闭div。我会尝试根据这个来解决我的问题并报告。我已经添加了一个新的答案。好的，我非常喜欢这个答案，因为它是一个纯CSS解决方案。对此我竖起大拇指。不再做关于它的噩梦：）