css中position 屬性規(guī)定元素的定位類型，任何元素都可以定位。絕對定位或者固定定位都會生成一個塊級元素，無論 該元素原來的類型是什么。

在寫彈窗的時候，我們基本就是利用position里面的fixed或者absolute來做的。首先來看下position屬性有哪些屬性值。

首先看absolute，定位是相對于static定位以外的第一個父元素定位的，那么一般我們在做彈窗的時候會相對于body元素來定位。

html代碼

樣式代碼如下。

彈窗css樣式

蒙板樣式

接下來最重要的是，讓彈窗在瀏覽器的中間顯示，那么我們就要算出彈窗在瀏覽器的top和left值。

瀏覽器視窗寬高

給dialog設置left和top

到此一個最基本的彈窗定位就寫好了。你以為好了嗎？哈哈哈，這個時候發(fā)現(xiàn)頁面有滾動條了，這個還可以嗎？答案是要繼續(xù)寫碼。有了滾動條說明頁面的高度已經(jīng)不單單用window的高度就可以，這個時候要加上滾動條的高度。

滾動高度

滾動條的高度加上之前的top值，就是現(xiàn)在的top值。當沒有滾動條的時候，$(document).scrollTop()是0，現(xiàn)在看起來咱們的彈窗是不是完美了呢。頁面夠長也不害怕了。此時，產(chǎn)品同學過來說，我想彈窗在頁面滾動的時候，跟著頁面一起移動，哈哈哈，此時是不是就是fixed出場的時候了。

在剛開始的時候看到了，fixed定義就是相對于窗口定位的。那么咱們的代碼就可以把瀏覽器滾動條的高度忽略。直接還是用

用%來計算top和left

大家在計算的時候會被好多js里面獲取高度和寬度的屬性搞暈了，我上面的敘述是不是清晰了好多。以上代碼都是基于jQuery，也可以原生的js來寫，原理相同。希望大家看完點個贊。