嵌套的固定元素在 IE 中不起作用答案

【问题标题】：Nested fixed element not work in IE嵌套的固定元素在 IE 中不起作用
【发布时间】：2015-06-15 00:18:01
【问题描述】：

我正在尝试将 fixed 元素放在另一个 fixed 元素中，像这样

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

当我在 Chrome 中滚动页面时，FF element-fixed 停留在 fixed 但在 IE 中它也会滚动，我想这不应该发生，因为 fixed 元素在文档流之外。

我尝试将其从content 中拉出，但没有成功，将其从wrapper-fixed 中拉出，但在我的情况下我不能。

HERE A JSFIDDLE和我的真实情况差不多

那么为什么会发生这种情况以及如何在不将其拉出wrapper-fixed 的情况下解决它

添加图片来说明问题：

【问题讨论】：

我无法重现您的 IE11 问题。哪个版本给了你这种行为？
我在 IE9 中尝试过，它也可以正常工作。编辑：即使在 IE8 中。
fixed 从 IE7 开始支持（尽管需要 DTD）。您是否在 Quirks 模式下运行页面？
@Teemu 我的浏览器是 IE 11.0.9600.16384
哦！当小提琴太窄以至于圆角矩形部分落在视口之外时，它确实保持固定。只有当您使小提琴足够宽时，它才会随着段落滚动。这就是为什么我一开始没有看到这个错误！这发生在 IE11 中，但不在 IE9 中。（这里没有要测试的 IE10。）您应该提交错误报告。

标签： html css internet-explorer css-position

【解决方案1】：

选项 1

将包装位置更改为绝对

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

小提琴 - http://jsfiddle.net/za4hdmpf/

选项 2

不适合，因为这需要一个不涉及将 element-fixed 拉出 wrapper-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;
}

小提琴 - http://jsfiddle.net/vuykwu76/

【讨论】：

如果 OP 想要 fixed，为什么要 absolute？
wrapper-fixed 的父级是 body。这使得它的行为与固定非常相似。
其实我可以看到 OP 的 fiddle 的问题（我的浏览器是 IE 11.0.9600.17842）。
是的，它有效，但相信我，在我的情况下，我无法改变位置：固定在包装器中，无论如何谢谢。
再次感谢您的关注，但我在问题中指定：“如何在不将其从 wrapper-fixed 中拉出的情况下进行修复”