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