CSS - position fixed changing width of element

Question

Check the below html snippet -

<div id="y">
<div id="x"></div>
</div>

Below is the CSS snippet

#x {
display: block;
background: red;
height: 80px;
width: 100%;
top: 0;
position: fixed;
}

#y {
display: block;
position: relative;
height: 80px;
width: 100%;
}

Behavior found is - The inner div "#x" occupies 100% of the width when its position is set as fixed. and the width takes a px value approx 20% of the width when its position is set to relative.

Question - Is it possible for a div element to have its width change just because it position value is fixed or relative? Or is something else happening(though i found nothing else).

Note - Could not repro the scneario in jsfiddle.

Fixed and absolutely positioned elements with percentage dimensions will be based on the size of the viewport. — whaley, Apr 14 '15 at 09:07
Possible duplicate - http://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container — Luís P. A., Apr 14 '15 at 09:09

score 1 · Answer 1 · answered Apr 14 '15 at 09:07

position shouldn't have an effect on the width; check the rest of the JavaScript for event handlers which are triggered when you change the position, especially since you can't reproduce the behavior in a simple jsfiddle.

Another cause might a CSS selector which suddenly starts to match but I can't think of one which would match a CSS style unless you use things like jQuery.

CSS - position fixed changing width of element

1 Answers1