Menu
In FX and IE the following code makes two bars, but the blue one is slightly wider than the browser screen. Any resizing will leave a horizontal scrollbar with the tail of the blue bar offscreen to the left. This is boiled down from a much larger page and I can't remove the position:absolute element in the original. Can anyone figure out how to make the blue bar only 100% wide so it matches the red one and doesn't cause a horizontal scrollbar? Any ideas what's behind this behavior? I'm stumped. Thanks very much.
<hr style="border:1px solid red; width:100%;"/>
<hr style="position:absolute; border:1px solid blue; width:100%;" />
870
asked Sep 17 '14 21:09
Because the element, which you give absolute position take the width from his parent and didn't behave as a block element. It takes the width and height from its content.
An absolutely positioned element is an element whose computed position value is absolute or fixed . The top , right , bottom , and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.)
position: relative places an element relative to its current position without changing the layout around it, whereas position: absolute places an element relative to its parent's position and changing the layout around it.
Simply:
body {position:relative;}
Demo http://jsfiddle.net/qyvtzyfh/
Reason:
In a very short simplified description, position:absolute; and width:100%; on the element make the width of the element relative to the immediate parent with an explicitly defined position:relative; or position:absolute;, in your case since you don't have it, it gets the width of the initial containing block (which contains the html element as well) instead of the body, by adding position:relative; to body you make the width of the element relative to body (besides its position).
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
