网站的优化策略,做seo的网站有那些,淘宝网(淘宝网),住建局官网网站众所周知#xff0c;position: fixed属性可以让我们的元素相对于当前视口的大小#xff0c;让元素定位到指定页面的指定位置#xff0c;也是我们经常使用的一个css属性
position: fixed; //参考视口定位
left: 50%;
top: 20px;
transform: translate(-50%); 但是今天在使用… 众所周知position: fixed属性可以让我们的元素相对于当前视口的大小让元素定位到指定页面的指定位置也是我们经常使用的一个css属性
position: fixed; //参考视口定位
left: 50%;
top: 20px;
transform: translate(-50%); 但是今天在使用过程中突然发现这个position: fixed属性居然出现了问题我的元素居然不是根据视口的宽度显示了
1、问题复现
让我们复现一下这个问题
img{filter: saturate(200%); //图片饱和度width: 180px;
}.model{width: 200px;height: 150px;background-color: skyblue;border-radius: 10px;padding: 5px;box-shadow: 0 0 5px;text-align: center;position: fixed; //参考视口定位left: 50%;top: 20px;transform: translate(-50%);
}这是为什么呢后来发现当我把fillter属性注释掉之后居然又正常了。。。。好奇怪的问题。
2、问题原因 后来百度了一大推发现原来filter会影响元素的父元素导致position的参考对象变了不再是body元素了变成了filter的父元素这当然不行了
3、问题解决 在vue3中提供了一个teleport标签可以直接解决这个问题只要将我们需要添加position: fixed;的元素包裹起来并指定他的参考元素就行了。
templatebutton clickisShowtrue展示弹窗/buttonteleport tobody div v-ifisShow classmodelh2我是弹窗的标题/h2p我是弹窗的内容/pbutton clickisShowfalse关闭弹窗/button/div/teleport
/templatescript langts setup
import { ref } from vue;
let isShow ref(false)
/scriptstyle langscss scoped
.model{width: 200px;height: 150px;background-color: skyblue;border-radius: 10px;padding: 5px;box-shadow: 0 0 5px;text-align: center;position: fixed; //参考视口定位left: 50%;top: 20px;transform: translate(-50%);
}
/style
