css中position 属性规定元素的定位类型,任何元素都可以定位。绝对定位或者固定定位都会生成一个块级元素,无论 该元素原来的类型是什么。
在写弹窗的时候,我们基本就是利用position里面的fixed或者absolute来做的。首先来看下position属性有哪些属性值。
首先看absolute,定位是相对于static定位以外的第一个父元素定位的,那么一般我们在做弹窗的时候会相对于body元素来定位。
样式代码如下。
接下来最重要的是,让弹窗在浏览器的中间显示,那么我们就要算出弹窗在浏览器的top和left值。
到此一个最基本的弹窗定位就写好了。你以为好了吗?哈哈哈,这个时候发现页面有滚动条了,这个还可以吗?答案是要继续写码。有了滚动条说明页面的高度已经不单单用window的高度就可以,这个时候要加上滚动条的高度。
滚动条的高度加上之前的top值,就是现在的top值。当没有滚动条的时候,$(document).scrollTop()是0,现在看起来咱们的弹窗是不是完美了呢。页面够长也不害怕了。此时,产品同学过来说,我想弹窗在页面滚动的时候,跟着页面一起移动,哈哈哈,此时是不是就是fixed出场的时候了。
在刚开始的时候看到了,fixed定义就是相对于窗口定位的。那么咱们的代码就可以把浏览器滚动条的高度忽略。直接还是用
大家在计算的时候会被好多js里面获取高度和宽度的属性搞晕了,我上面的叙述是不是清晰了好多。以上代码都是基于jQuery,也可以原生的js来写,原理相同。希望大家看完点个赞。