父元素设置absolute,子元素设置fixed定位失效

Question

如下代码，应该一目了然

<div class = "relative">
    <div class ="absolute">
        <div class="fixed"></div>
    </div>
</div>

里面的元素原本是正常定位的，需要动态改成fixed，又不能把元素移到外层，怎么解决？

Answer 1

fixed相对于body定位，而不是相对于父元素absolute，所以你这样的布局会出错吧？所以你得重新考虑下布局，具体要求是什么呢。

Answer 2

你的这个需求有问题，fixed只会对窗口生效，这很正常，

Answer 3

看了下源代码, 他的代码是
left: auto; position: relative; z-index: 1; top: auto; right: 0px; display: block;
==>
left: 0px; position: fixed; z-index: 1; top: 0px; right: 0px; display: block; width: 1254px;

而父级是relative

Answer 4

通过测试发现不同浏览器对这个fixed属性的渲染规则不一样，chrome和firefox就会出现这个问题，内层fixed会相对于父元素的位置和宽高。而IE浏览器则是理论的状态，即只对最顶层元素定位

Answer 5

最外层的relative直接把里面所有的定位锁死了；fixed->absolute->relative;整个全随着relative的定位左上角坐标为0.0走了；