在父div上溢出子div背景颜色

Question

Is there a way to overflow the background color of a child-div over its parent-div container? I'm trying to add full-screen width background-color but the parent-div has a fixed width. here is my HTML structure:

<div id="parent">
    <div class="child">PAGE TITLE</div>
</div>

The CSS:

#parent {
    max-width: 760px;
}

.child {
    width: 100%;
    background-color: red;
}

Answer 1

What you are trying to do is impossible with the current code setup as the child's z-index is set to the same stacking index as its parent as are its dimensions if you are using percentages.

You will need to do something like this to achieve your desired result.

HTML

<div id="parent">
    <div class="child">PAGE TITLE</div>
</div>

<div id="page"></div>

CSS

#parent {
    max-width: 760px;
    background: green;
}

.child {
    width: 100%;
    background-color: red;
}

#page {
    width: 760px;
    height: 760px;
    background: green;
    position: relative;
    z-index: 1;
}

Answer 2

don't know if this is what you want.

#parent {
    max-width: 760px;
    margin: 10px auto;
}

.child:before {
    width: 100%;
    height: 24px;
    content: ' ';   
    position: absolute;
    left: 0;
    z-index: -1;
    background-color: green;
}

Note: #parent's background-color must be transparent to make these css work.

Check my fiddle

Answer 3

Use box-shadow to simulate the background overflow since it's a solid color:

 #parent { max-width: 760px; height: 100px; padding: 10px 0; margin:auto; background:blue; } .child { width: 100%; height: 100%; background-color: red; box-shadow: 760px 0 0 red, 1520px 0 0 red, -760px 0 0 red, -1520px 0 0 red; } 

 <div id="parent"> <div class="child">PAGE TITLE</div> </div>