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

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

如下代码,应该一目了然

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

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


看了下源代码, 他的代码是
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


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


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


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


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

【热门文章】
【热门文章】