问题描述:
一个脱离文档流的元素定位,要根据文档流中的特定元素的位置而改变,而该特定元素的位置又是不固定的,这个时候css代码就不能直接写,需求如下:
解决方案:
- 先给弹窗写基础样式,定位信息可以不写
toast_tips 表示该元素的基础样式,写在css中,toast_tips_style表示附加样式,需要在js中动态写入
<div v-show="toast" class=‘toast_tips‘ :style="toast_tips_style" @click="hideToast"> <p>xxxxxxxx</p> </div>
.toast_tips{ position: absolute; width:5.12rem; height:1.44rem; display: flex; flex-direction: column; align-items: left; padding-top: 0.4rem; padding-left: 0.213333rem; background: url(‘../../../static/images/partner/freeze.png‘) no-repeat center/100%; >p{ font-size:0.32rem; font-family:PingFangSC; font-weight:400; color:rgba(51,51,51,1); line-height:16px; } }
- data中写入toast_tips_style附加样式结构
data () { return { toast:false, //增加的附加样式,这里就是动态增加定位样式 toast_tips_style:{ left: ‘‘, top:‘‘ }, }
- js中给toast_tips_style动态样式设置数据
找到定位元素的参照物,利用 this.$refs获取参考元素rt_dom和目标元素faq_dom的dom节点,找到参考元素的定位信息
根据参考元素和目标元素的位置关系,动态设置目标元素的位置信息
div class="rt" ref="rt_dom"> <span ref="faq_dom" class="faq" @click="show_toast"></span>
show_toast:function(event){ this.toast = true; //获取当前屏幕宽度px var screen_width = document.body.clientWidth; var el = event.currentTarget; var rt_dom = this.$refs.rt_dom.offsetHeight; var faq_dom = this.$refs.faq_dom.offsetLeft; //计算出的定位信息px转rem this.toast_tips_style.left=(faq_dom-145)*10/screen_width+‘rem‘ this.toast_tips_style.top=(rt_dom-8)*10/screen_width+‘rem‘ },
PS:如果你不想js中去写css代码,你也可以用一个相对位置的div去包含一个绝对位置的div,定位信息可以使用负数的方式去矫正定位。