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

最新推荐文章于 2023-07-17 14:00:00 发布

笑道三千

最新推荐文章于 2023-07-17 14:00:00 发布

阅读量2k

点赞数 1

分类专栏：前端报错

本文链接：https://blog.csdn.net/weixin_42349568/article/details/109967717

版权

前端报错专栏收录该内容

58 篇文章 2 订阅

订阅专栏

效果如下：
在这里插入图片描述

注意到这里有个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>

效果：
在这里插入图片描述

笑道三千

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
解决fiexd和transform一起用导致的失效问题

效果如下：注意到这里有个bug，当点击切换的时候，底部的tab标签会跑走，这是因为fiexd和transform一起用，导致的失效问题。对应的样式代码如下：至于解决方案：从张鑫旭大佬这里可以看到：https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/原因就是transform的出现，导致了fiexd的降级为position:absolute了要解决这一个问题，需要用position relative来限制一下。
复制链接

扫一扫