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

前端之家收集整理的这篇文章主要介绍了html – Chrome:修复父级时,无法将一个绝对div放在另一个上面前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我发现当我想要在顶部的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

原文链接:https://www.f2er.com/html/426783.html

猜你在找的HTML相关文章