css中position 属性规定元素的定位类型，任何元素都可以定位。绝对定位或者固定定位都会生成一个块级元素，无论 该元素原来的类型是什么。

在写弹窗的时候，我们基本就是利用position里面的fixed或者absolute来做的。首先来看下position属性有哪些属性值。

首先看absolute，定位是相对于static定位以外的第一个父元素定位的，那么一般我们在做弹窗的时候会相对于body元素来定位。

html代码

样式代码如下。

弹窗css样式

蒙板样式

接下来最重要的是，让弹窗在浏览器的中间显示，那么我们就要算出弹窗在浏览器的top和left值。

浏览器视窗宽高

给dialog设置left和top

到此一个最基本的弹窗定位就写好了。你以为好了吗？哈哈哈，这个时候发现页面有滚动条了，这个还可以吗？答案是要继续写码。有了滚动条说明页面的高度已经不单单用window的高度就可以，这个时候要加上滚动条的高度。

滚动高度

滚动条的高度加上之前的top值，就是现在的top值。当没有滚动条的时候，$(document).scrollTop()是0，现在看起来咱们的弹窗是不是完美了呢。页面够长也不害怕了。此时，产品同学过来说，我想弹窗在页面滚动的时候，跟着页面一起移动，哈哈哈，此时是不是就是fixed出场的时候了。

在刚开始的时候看到了，fixed定义就是相对于窗口定位的。那么咱们的代码就可以把浏览器滚动条的高度忽略。直接还是用

用%来计算top和left

大家在计算的时候会被好多js里面获取高度和宽度的属性搞晕了，我上面的叙述是不是清晰了好多。以上代码都是基于jQuery，也可以原生的js来写，原理相同。希望大家看完点个赞。