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
– whaley, Commented Apr 14, 2015 at 9:07
Possible duplicate - stackoverflow.com/questions/6794000/… — Luís P. A.
– Luís P. A., Commented Apr 14, 2015 at 9:09

Aaron Digulla · Accepted Answer · 2015-04-14 09:07:42Z

1

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.

answered Apr 14, 2015 at 9:07

Aaron Digulla

330k111 gold badges626 silver badges840 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS - position fixed changing width of element

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related