html - Nested fixed element not work in IE -
i'm trying put fixed
element within fixed
element this
<div class="wrapper-fixed"> <div class="content"> <div class="element-fixed"> <p>i'm fixed in chrome, ff</p> <p>why not in ie ?</p> </div> </div> </div>
when scroll page in chrome , ff element-fixed
stay fixed
in ie scrolls , guess should not happen because fixed
element outside document flow.
i tried pulling out of content
did not work, pulling out of wrapper-fixed
in case can't.
here jsfiddle similar real situation
so why happens , how fix without pulling out of wrapper-fixed
adding images illustrate problem:
option 1
change wrapper position absolute
.wrapper-fixed{ position: absolute; ...
fiddle - http://jsfiddle.net/za4hdmpf/
option 2
won't suitable requires solution not involve pulling element-fixed out of wrapper-fixed.
change markup , make position adjustments element-fixed
<div class="wrapper-fixed"> <div class="content"> <p>content</p> <p>content 1</p> <p>content 2</p> <p>content 3</p> <p>content 4</p> <p>content 5</p> <p>content 6</p> <p>content 7</p> <p>.</p> <p>.</p> <p>.</p> </div> </div> <div class="element-fixed"> <p>i'm fixed in chrome, ff</p> <p>why not in ie ?</p> </div>
css
.element-fixed{ position: fixed; width: 170px; border-radius: 10px; top: 70px; left: 50%; margin-left: -290px; background-color: #fff; }
fiddle - http://jsfiddle.net/vuykwu76/
Comments
Post a Comment