Geek Answers Handbook

Nested fixed element not working in IE

I am trying to put a fixed element in another fixed element like 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 I browse the page in Chrome and the FF element-fixed remains fixed , but in IE it scrolls too, and I think this should not happen, because the fixed element is outside the flow of the document.

I tried pulling it out of content , but didn't work pulling it out of wrapper-fixed , but in my case I can't.

HERE JSFIDDLE , similar to my real situation

So why is this happening and how to fix it without pulling it out of wrapper-fixed

Adding images to illustrate the problem:

enter image description here

enter image description here

+5
source share
1 answer

Option 1

Change the wrapper position to absolute

 .wrapper-fixed{ position: absolute; ...

Fiddle - http://jsfiddle.net/za4hdmpf/

Option 2

It will not be suitable, as this requires a solution that does not include pulling the element fixed from the fixed shell.

Change your layout and make position adjustments to a fixed element

 <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/

+1
source

More articles:


All Articles