Extend child div beyond container div

问题:

I'm trying to expand this div across with width of the browser. I've read from here that you can use {position:absolute; left: 0; right:0;} to achieve that as in the jsfiddle here: http://jsfiddle.net/bJbgJ/3/

But the problem is that my current #container has a {position:relative;} property, and hence if I apply {position:absolute} to the child div, it would only refer to #container. Is there a way to still extend my child dive beyond the #container?

回答1:

I can think of five ways to potentially accomplish your goal:

1. Use negative margins on the inner element to move it outside of the parent

2. Use Javascript to move the inner element outside of the parent.

3. Change the source code and move the inner element outside of the parent.

4. Use position: fixed on the inner element. This will allow the inner element to break out but has the down side that the element will be fixed at the given position (never moving).

5. Remove the position: relative; from the parent element or give the parent element a position: static

回答2:

You can try adding overflow:visible to the parent div, then making the child wider than the parent.

回答3:

Parent to position:static, child to position:absolute or

Parent to position:relative, child to position:fixed (with the fixed, never moving downside)

Your left: 0; right:0; works with both of these solutions, just note that your child div will draw on top of any divs below it in code, no matter what the div's display property is set to. You will either have to add a padding-top value to the next div to compensate (simple example in jsfiddle), or another div underneath that has the same height behavior as the child (a much more elaborate example in codepen), which is probably not ideal, but works in simple html/css.