解决fiexd和transform一起用导致的失效问题

效果如下：

注意到这里有个bug，当点击切换的时候，底部的tab标签会跑走，这是因为fiexd和transform一起用，导致的失效问题。
对应的样式代码如下：

至于解决方案：
从张鑫旭大佬这里可以看到：https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/

原因就是transform的出现，导致了fiexd的降级为position:absolute了
要解决这一个问题，需要用position relative来限制一下。
也就是说，给父盒子（没有的话，创建一个空盒子），增加一个样式：position relative

也就是说，不仅仅是鑫大神博客中说的那样，子盒子fixedd，父盒子transform会出问题。
当两个兄弟组件，一个fixed，另一个transform时，也会出现问题，解决的办法就是父组件添加：position relative

示例（正常情况下兄弟之间是没有问题的，只有子盒子fixedd，父盒子transform会出问题）：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.fixed { position: fixed; bottom: 0;left: 42%;z-index: 20;}.first{width: 200px;height: 2000px;margin: 0 auto;background: yellow;transition: all 1s linear;}/* 鼠标滑过fixed的图片来控制first动画 */.fixed:hover~.first{background: blue;transform: translateX(300px);}</style></head><body><div class="main"><img src='./img/1.jpg' class="fixed"><div class="first"></div></div></body>
</html>

效果：

解决fiexd和transform一起用导致的失效问题相关推荐

服务器开启虚拟机就死机,解决ESXi服务器上磁盘锁导致虚拟机卡死的问题
解决ESXi服务器上磁盘锁导致虚拟机卡死的问题解决ESXi/ESX服务器上磁盘锁导致虚拟机假死.卡死的问题当虚拟机被卡死或假死时,在文件夹里面只有如下内容信息: 1. .vswp 2. -flat ...
css overflow和border-radius一起用解决圆角和滚动条一起用的问题
css overflow和border-radius一起用解决圆角和滚动条一起用的问题参考文章: (1)css overflow和border-radius一起用解决圆角和滚动条一起用的问题 ( ...
解决Debian 9 iwlwifi固件缺失导致无法连接无线网络的问题
解决Debian 9 iwlwifi固件缺失导致无法连接无线网络的问题参考文章: (1)解决Debian 9 iwlwifi固件缺失导致无法连接无线网络的问题 (2)https://www.cnbl ...
[异常解决] 安卓6.0权限问题导致老蓝牙程序出现异常解决办法：Need ACCESS_COARSE_LOCATION or ACCESS_FINE_LOCATION permission...
[异常解决] 安卓6.0权限问题导致老蓝牙程序出现异常解决办法:Need ACCESS_COARSE_LOCATION or ACCESS_FINE_LOCATION permission... 参考 ...
成功解决ValueError: (‘Unknown transform primitive years. ‘, ‘Call ft.primitives.list_primitives() to get
成功解决ValueError: ('Unknown transform primitive years. ', 'Call ft.primitives.list_primitives() to get ...
加mp4文件后js失效_Jquery方法load之后导致js失效解决方法
Jquery方法load之后导致js失效解决方法 >>>>>>>>>>>>>>>>>>> ...
谷歌浏览器打开标签会把之前的覆盖掉_Chrome 浏览器新更新解决了本地文件拖入导致的标签页意外关闭问题...
原标题:Chrome 浏览器新更新解决了本地文件拖入导致的标签页意外关闭问题这个问题之前相当让人头疼(至少对小编来讲是这样). 你有没有在 Google Chrome 浏览器上使用过拖放功能,但却发 ...
Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案)
这篇文章主要介绍了用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案),需要的朋友可以参考下问题前端小同学在做页面的时候,犯了个常见的错误:把多个Ajax请求顺序着写下来了, ...
zabbix mysql设置中文乱码_解决zabbix监控因php问题导致图形界面中文乱码方法
解决因编译php中添加了-enable-gd-jis-conv选项导致Zabbix监控系统图形界面中文乱码问题现象: php编译参数: 说明: 如果PHP编译时启用–enable-gd-jis-co ...
技术实践丨如何解决异步接口请求快慢不均导致的数据错误问题？
本文分享自华为云社区<如何解决异步接口请求快慢不均导致的数据错误问题?>,原文作者:Kagol . 引言搜索功能,我想很多业务都会涉及,这个功能的特点是: 用户可以在输入框中输入一个关键 ...

解决fiexd和transform一起用导致的失效问题

示例（正常情况下兄弟之间是没有问题的，只有子盒子fixedd，父盒子transform会出问题）：

解决fiexd和transform一起用导致的失效问题相关推荐

最新文章

热门文章