transform 后position:fixed失效

图片描述

顶部点击时整个页面会向右有个translate 发现底部的fixed失效
查阅发现translate内的内容不能有fixed定位,请问这种情况有什么解决办法么

阅读 13.5k
2 个回答
  1. 你可以在body里面添加两个div,第一个div设置为内容容器,把需要translate的那部分都放到第一个div里面,然后把需要fixed定位的元素放到第二个div中;

  2. 因为fixed定位是相对于视窗的和在文档中的位置没有关系,所以你可以直接把fixed定位的元素作为body元素的最后一个元素(防止被别的元素覆盖,或者设置一个高的z-index);

总而言之,既然translate内不能包含fixed定位的元素,你就把fixed定位的元素移动到translate元素的外边就行。

translate属性所在的元素和fixed属性所在的元素的不要是层级关系

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题