小编Jon*_*ind的帖子

位置固定在容器元素内而不是浏览器/视口中

我需要将一个标题定位在包含父项中,以便在滚动时跟随它.问题是

position:fixed
Run Code Online (Sandbox Code Playgroud)

将位置固定到浏览器,而不是父级.这导致的是,当我有一个容器在宽度上有一个水平滚动溢出(内容比容器宽)时,我的固定头没有像表的内容那样的溢出滚动.

看这个小提琴演示

所以这里的目标是修复标题的位置,但相对于它的父容器是固定的.在这个小提琴中,你可以看到我已经注释掉了一块css:

.container{

     /*-webkit-transform: translateZ(0);
     -moz-transform: translateZ(0);
     -ms-transform: translateZ(0);
     transform: translateZ(0);*/

     -webkit-transform: none;
     -moz-transform: none;
     -ms-transform: none;
     transform: none;   
}
Run Code Online (Sandbox Code Playgroud)

如果将当前的css块(变换设置为none)替换为带有translateZ的块,则标题将位于其父容器中,但不再修复.

有谁知道如何解决这个问题?首选的解决方案是CSS/HTML并避免使用JS,但如果没有别的话,那么JS当然是我需要的!

html javascript css

6
推荐指数
1
解决办法
4119
查看次数

标签 统计

css ×1

html ×1

javascript ×1