position:absolute makes an hr element more than 100% wide

Question

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%;" />

Answer 1

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).