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

重叠父div没有css位置属性

1 个答案: