html – Chrome：修复父级时,无法将一个绝对div放在另一个上面

发布时间：2020-12-14 23:18:25 所属栏目：资源来源：网络整理

导读：我发现当我想要在顶部的div的父级被修复时,我无法在Chrome中将一个绝对定位的div放在另一个div上：这是一个证明问题的JSFiddle： http://jsfiddle.net/SEJhg/ 您应该会在Chrome中看到黄色绝对定位的div与z-index 10出现在绿色绝对定位的div后面,z-index：1,

我发现当我想要在顶部的div的父级被修复时,我无法在Chrome中将一个绝对定位的div放在另一个div上：


这是一个证明问题的JSFiddle：
http://jsfiddle.net/SEJhg/
您应该会在Chrome中看到黄色绝对定位的div与z-index 10出现在绿色绝对定位的div后面,z-index：1,因为父级的固定位置.
其他浏览器如Firefox在绿色顶部显示黄色div.
有关如何在Chrome中解决此问题的任何建议？我无法改变父母的固定位置.
谢谢！


最佳答案
您所体验的是Chrome中的一项相对较新的行为,旨在使桌面浏览器行为与移动浏览器保持一致.
当元素有位置：固定;与#parent一样,为该元素创建了一个新的堆叠上下文,这意味着该元素及其子元素相对于彼此而不是相对于窗口上下文堆叠.因此,不能将固定元素(#bottom)的子元素放在“#parent和#top之间”.
您的解决方案是将#bottom移动到#parent内(将其置于相同的堆叠上下文中),或将#parent的定位方法更改为除固定之外的其他内容.
Chrome中此更改的提议可在此处找到：http://lists.w3.org/Archives/Public/www-style/2012May/0473.html
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!