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

如下代码,应该一目了然

<div class = "relative">

<div class ="absolute">

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

</div>

</div>

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

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

你的这个需求有问题,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属性的渲染规则不一样,chrome和firefox就会出现这个问题,内层fixed会相对于父元素的位置和宽高。而IE浏览器则是理论的状态,即只对最顶层元素定位

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值