因此,我在浏览器窗口中创建了一个small_window,在其中创建了一个small_window,其中包含一些自动滚动的文本。

我还希望smaller_window中的某些文本保持静态,并且不要在smaller_window中滚动。因此,这里pos_fixed是绝对的,相对于small_window。

<header>
<style type="text/css">
.small_window{
    position:relative;
}

#smaller_window{
    height:470px;
    overflow-x:hidden;
    overflow-y:auto;
    position: initial !important; /* I expect this would make pos_fixed a child of small_window instead of smaller_window */
}

p.pos_fixed {
position: absolute;
top: 200px;
right: 30px;
}
</style>
</header>

<body>
<div id="small_window">
    <div id="smaller_window">
        <p class="pos_fixed">This line is fixed relative to smaller_window</p>
    </div>
</div>
</body>


在Firefox38和IE11上,它像一个魅力一样工作。
但是,我怀疑它的跨浏览器兼容性,因为我的移动浏览器(chrome mobile)仍然pos_fixed相对于small_window定位,显然已经忽略了

#smaller_window{
    position: initial !important;
}


关于更好的跨浏览器兼容方式来将固定的孩子相对于父母的父母定位的任何建议?

最佳答案

您没有为较小的窗口添加类,而是在CSS中为较小的窗口编写了ID,它将如何工作?您可以在小提琴中发布您的代码吗?

关于html - 相对于 parent 的 parent 定位固定的 child ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30973987/

10-10 00:47