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:

enter image description here


enter image description here

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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -