【position也可以很复杂】当弹出层遇上了鼠标定位（下）
生活随笔
收集整理的這篇文章主要介紹了
【position也可以很复杂】当弹出层遇上了鼠标定位（下）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
接著昨天的內容寫，為了保證內容連續性，這里還是把昨天的內容拷了過來。
請用現代瀏覽器測試
引出問題
有圖有真相，我們來看一個智聯招聘里面經常出現的圖層：
他這個是沒有什么問題的，我們來簡單看看其實現：
View Code 復制代碼 1 <div id="zbwJobSearch"> 2 ? ? ? ? ?<div style="width: 710px;" class="sPopupDiv"> 3 ? ? ? ? ? ? ?<div class="sPopupTitle213 sPopupTitle"> 4 ? ? ? ? ? ? ? ? ?<h1> 5 ? ? ? ? ? ? ? ? ? ? ?選擇職位</h1> 6 ? ? ? ? ? ? ? ? ?<div class="sButtonBlock"> 7 ? ? ? ? ? ? ? ? ? ? ?<a οnclick="return zbw.PopupDiv.allIns['buttonSelJobType'].fnClickAll()" href="#" 8 ? ? ? ? ? ? ? ? ? ? ? ? ?class="blueButton">不限</a> <a οnclick="return zbw.PopupDiv.allIns['buttonSelJobType'].fnClickClose()" 9 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?href="#" class="blueButton">關閉</a></div> 10 ? ? ? ? ? ? ? ? ?<div class="clear"> 11 ? ? ? ? ? ? ? ? ?</div> 12 ? ? ? ? ? ? ?</div> 13 ? ? ? ? ? ? ?<div class="clear"> 14 ? ? ? ? ? ? ?</div> 15 ? ? ? ? ? ? ?<div class="sPopupBlock"> 16 ? ? ? ? ? ? ?</div> 17 ? ? ? ? ?</div> 18 </div> 復制代碼
他一開始便有一個容器在頁面上，看著我們這個“zbwJobSearch”的容器，他是一個一般流的東西，里面放了3個絕對定位的東西，從這里看出，他這個不只是用于職位選擇還有城市選擇什么的。。。。
然后我們把多余的東西給去掉，點擊了一下我本來以為會發送http請求什么的，重新獲取數據，再生成我們看到的那顆樹，但是解壓js后發現這個東西好像被寫到了js中，基本就是生成了這個東西：
生成的職位列表 他是一個表格，里面有很多事件！！！
我們這個td里面有一個span元素，給span了一個click事件，點擊后會彈出我們要的結果：
然后進行最后的操作。
分析問題
好了，到了這里我們不知道我把問題解釋清楚沒有：
1 點擊外部按鈕便彈出了我們要的第一個彈出層。
2 點擊其中的“加號”或者文字便彈出具有多選框的可選項
3 選擇項目點擊確定。
以上幾個做完，我們的流程便結束了。
優化方案
不知從什么時間開始，我有了一點代碼潔癖，看著這個代碼我怎么就感覺有點不爽，他這個東西主要有以下問題：
1 table渲染速度慢
2 td/span有太多的事件，過多的事件綁定對我們的性能也有影響。
3 他的click函數全部寫到了標簽上（仁者見仁，我是非常不喜歡這樣做）
其它
我們來看看，他其它地方其實做了一定處理:
<span οnclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['348','物流/倉儲'])" class="availItem">物流/倉儲</span> 為了防止命名沖突，我們看看這家伙定義的命名空間可長可長了。長到我都不想看了。。。。
好了暫時其它問題我這里還沒發現，只不過我認為其中幾個圖片按鈕相關可以用標簽實現啦。。。
既然說都說了這么多，那我們不如先來寫一個唄，寫了再繼續我們的問題吧！
實現職位選擇功能
我們現在一起來實現這個職位選擇功能，所以我們先分析下我們需要干些什么：
① 點擊text在text處出現彈出層
② 彈出層出來后，我們點擊其中的“加號”或者文字便彈出第三個彈出層
③ 選擇第三個彈出層里面的checkbox項目最后點擊確定后便將選擇插入text（多項以分號分割）
若是想要優化的話，也許可以嘗試點擊后再加載數據再生成dom，一旦生成后便將dom緩存起來，我們這里作為demo就不搞那么多事情了。
第一步，準備工作
下拉選擇文本
實現功能前，我們先準備一點點小東西，第一個就是長得像下拉菜單的文本框：
復制代碼 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 ? ? <title></title> 4 ? ? <style type="text/css"> 5 ? ? ? ? .dropText { display: inline-block; border: 1px solid #B6B6B6; border-right: none; border-radius: 5px 0 0 5px;? cursor: pointer; margin-right: 20px; } 6 ? ? ? ? .dropText input { border: none; border-radius: 5px 0 0 5px; cursor: pointer; padding-left: 5px; } 7 ? ? ? ? .dropText span { display: inline-block; margin-right: -10px; width: 20px; border: 1px solid #B6B6B6;? border-radius: 0 5px 5px 0; margin: -1px -20px -1px 0; text-align: center; padding: 4px 0 4px 8px; } 8 ? ? ? ? .dropText i { display: inline-block; border: 6px solid black; border-color: black transparent transparent;? border-bottom: none; vertical-align: 3px; } 9 ? ? </style> 10 ? ? <script src="../../scripts/jquery-1.7.1.js" type="text/javascript"></script> 11 ? ? <script type="text/javascript"> 12 ? ? ? ? $(document).ready(function () { 13 ? ? ? ? }); 14 ? ? </script> 15 </head> 16 <body> 17 ? ? <div style="margin: 100px auto; padding-left: 100px;"> 18 ? ? ? ? <div class="dropText" id="dropText"> 19 ? ? ? ? ? ? <input type="text" placeholder="請選擇職位" /><span><i></i> </span> 20 ? ? ? ? </div> 21 ? ? ? ? <span>dddd</span> 22 ? ? </div> 23 </body> 24 </html> 復制代碼
我們來看看我們形成的這個框，這個在現代瀏覽器還能看，而且各位千萬不要小看這個東西，這個東西真不像各位想象那么簡單，比如我這個代碼就有很大的優化空間！
PS：各位看到我的span里面多了一個 我為什么會這么做？不這么做有什么影響？i被設置為inline-block對整體行對齊有什么影響，這塊代碼還可以如何優化？這個問題暫時留給各位了，我們下來再一起解決，這個對行內元素的理解有莫大的幫助，請各位動手吧。
十字開關
復制代碼 1 <style type="text/css"> 2 /*十字開關*/ 3 .croSwitch { display: inline-block; border: 1px solid #108efe; border-radius: 4px; width: 16px;? height: 16px; text-align: center; position: relative; cursor: pointer; } 4 .croSwitch i { background-color: #108efe; border-radius: 6px; position: absolute; } 5 ? ? ? ?? 6 .croSwitch .horizontal { width: 12px; height: 2px; left: 2px; top: 7px; } 7 .croSwitch .vertical { height: 12px; width: 2px; top: 2px; left: 7px; } 8 .cls .vertical { display: none; } 9 </style> 10? 11 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 12 <span class="croSwitch cls"><i class="horizontal"></i><i class="vertical"></i></span> 復制代碼
雖然很丑但是很溫柔。。。
Ps：請思考若是外層span不設置高度會有什么后果
好啦，小東西大概懂弄好了，我們現在來組織職位的dom結構吧。
職位列表樣式
我們首先根據上面的表格，使用jquery操作他生成如下結構：
最新的結構
好了，我們現在來調整一下樣式。
由于這個家伙著實太丑了，我放棄了，我這里上傳個圖片好了。。。。
可運行代碼：
基本列表樣式
PS：第三個坑，不知道各位發現沒，就算使用背景圖片，我們的小圖片看上去感覺還是有一些問題呢，我們是不是應該看看呢？
好了，我們將我們第一階段的代碼連起來：
帶交互代碼 三層彈出：
我們在樣式上做一點優化，加上鼠標hover效果，其它暫時不管。于是我們來看看他點擊時候再彈出功能如何實現呢？我們這里看看原來的代碼：
<span οnclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['306','生產/加工/制造'])" class="availItem">生產/加工/制造</span> 我們看著，他這里有一個id，所以我這里有這樣一個實現思路：
① 這個id必定對應著自己的id，我們根據此id可以選出其子項（根據省id可以得出市id）
② 由于他這個數據是一次性讀出的，所以父級id對應子項應該已經緩存起來了，可以是字符串，也可以是dom結構
③ 然后我們這里先預先定義一個這樣的結構：
復制代碼 1 var jobListObj = { 2 '1': 'dom', 3 '2': 'dom', 4 '3': 'dom', 5 '4': 'dom' 6 } 復制代碼 現在的邏輯便是，我們點擊“加號”或者文字，從而獲取我們的id（1-4），我們根據id獲取dom，我們再定位我們的dom在應該出現的位置，整個邏輯結束。
于是我們來測試下我們的思路是否正確，因為原來就沒有綁定id上，我們現在為四個角搞一個id即可，四個方向上能正常顯示，我們這里就不管了。
PS：寫到這里其實已經離題了，想說的問題還沒說呢，我們其實沒必要實現這個功能的，但是都走到這一步了只能硬著頭皮寫下去了。。。
最后形成的代碼：
View Code 演示效果，可運行（友情提示請使用IE9+）
咳咳，離題離的離譜
昨天最初想寫的東西和以上的東西沒有多大關聯，偏題偏得離譜啊！！！
我當時很臭屁的認為自己能1,2個小時完成這個功能來著，最后發現這家伙還真不是那么簡單的。。。這不，今天又花了2個小時才搞出這么一個四不像的東西，而且我也不想繼續搞這個了，因為這次的主題不是這個，職位選擇框我們暫時就這個樣式吧，以后有機會再形成插件。
現在我們開始進行下一步探討，看看問題出現在哪。
正文開始
我們看到，這個職位選擇框，其實本身沒有什么問題，但是卡了組員1.5天的東西到底是什么呢？
其實是需求，因為需求變更，原來放在頁面上，好好的元素，現在被放在了一個彈出層里面，于是各種各樣的問題都出來了。。。。
① 彈出層的遮蓋層z-index過大，遮蓋了我們的職位層
② 彈出層本身的z-index過大，也遮蓋了我們的職位層
但是以上兩個問題都比較好處理，比較難處理的出來了：
這個項目之前的項目人員并不是像我這樣將各個彈出層獨立出來，都是以body為包含快（containing block），而是放在了一個div里面
并且將這個div放進了彈出層那個容器里面，于是我們來看看可能出現的問題：
① 由于absolute的包含快有所不同，其依賴最近的布局元素，所以之前js計算位置的方法可能失效
② 不知道原來處于什么考慮，代碼中div容器布局為relative。。。。。其定位方法十分詭異
③ 奇怪的現象就是二級彈出層正常顯示，三級彈出層你壓根找不到！！！
以上便是組員遇到的問題，還有一個客觀的因素就是原來的js依次分布到三個不同的地方，然后代碼又全部壓縮過了，我處理的時候還需要解壓什么的，而且原來的代碼中有很多地方沒有分號，沒有報錯真是個奇跡（其實經常出現莫名的js錯誤啦，總之坑很多）。
我看著代碼后不一會就發現了問題所在，問題本身并不難，解決也比較輕易，但是知不知道就很重要了。
原來實現思路：
① 由于裝第一個彈出層的div是relative定位的，所以他定位到下拉框的實現方法和我們想象的不一樣，是相對于div的位置，而不是body
他這個實現方案，我們不予評價，但是就這種方法要傷害多少我多少腦細胞，我就確實不想去想了。。。這里我居然還有點佩服原來開發的思維能力了。。。
② 他第一步，彈出層居然還能精準定位到下拉文本，但是當他再點擊彈出層里面的文字準備彈出最終的東西時，終于開始悲劇了。。。
我那兩個倒霉的組員要干神馬事情呢，他們面臨的又是什么呢：
① 在絕對定位彈出層上面（parent）有個正常流文本下拉文本框與div容器（div），并且該容器是relative定位的
② div中有2塊彈出層（tan1，tan2），點擊parent上面的下拉文本便彈出tan1，并且其定位必須精準，1像素只差都會很難看
③ 在tan1出來后，便點擊tan1中的文字，根據該文字元素定位tan2
PS：不知道你們暈沒有，反正我是暈了
人家這個插件本來是用于普通流的，其根元素為body，但是現在搞到彈出層里面來了，所以出現了這些問題。
我最后就直接總結了一下他這個最大的問題，就是實現過于復雜，所以昨天才忍不住自己寫了一個（雖然效果不好。。。）
當然，最后我的解決方案更加詭異，這里就不說明了，因為沒有什么意義，但是根據這個東西，我卻提煉了一點點很有意思的東西與大家分享呢。這也是組員找不到問題的原因。
relative與鼠標點的定位
有例子有真相！！！
View Code 各位看看我們這個代碼干的事情：
復制代碼 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 ? ? <title></title> 4 ? ? <style type="text/css"> 5 ? ? ? ? body { font: 12px 'PTSansRegular',Arial,Helvetica,sans-serif; background: #D1D1D1; } 6 ? ? ? ? ul, li { margin: 0; padding: 0} 7 ? ? ? ? li { list-style: none; } 8 ? ? ? ?? 9 ? ? ? ? #tabs_container { width: 400px; height: 200px; background: white;} 10 ? ? ? ? #tabs { border-bottom: 1px solid #1C87D5; padding: 5px 5px 0; ?width: 690px; margin: 0 auto; ?} 11 ? ? ? ? #tabs li { padding: 5px 10px; ?cursor: pointer; display: inline-block; background: #1C87D5; color: White; } 12 ? ? ? ? #tabs li.sec { color: black;} 13 ? ? ? ?? 14 ? ? ? ? #parent { width: 700px; height: 400px; background: white; margin: 0 auto; position: relative; } 15 ? ? ? ? #parent div { filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; font-weight:bold; background: red; position: absolute; } 16 ? ? </style> 17 </head> 18 <body> 19 ? ? <ul id="tabs" > 20 ? ? ? ? <li type="draw" class="sec">畫矩形框</li> 21 ? ? ? ? <li type="drag">拖到矩形框</li> 22 ? ? </ul> 23 ? ? <div id="parent"> 24 ? ? </div> 25 ? ? <div id="state"></div> 26 </body> 27 </html> 復制代碼 ① parent容器的定位是relative
② 我們在parent里面畫的div是absolute
③ 但是，我們div定位是根據鼠標的x/y確定的，而這個是相對于body的，所以我們這里會錯位（因為div是相對于parent布局，不是body）
④ 為了解決錯位問題，我們便要用x/y減去parent的offset top與left
此塊單獨處理問題不大，就怕頁面中彈出層過多時候導致你已經分不清誰是誰的包含快了，所以便會出現錯位問題，這也是同事遲遲不能解決問題的癥結點。
z-index
擴展知識：http://www.qianduan.net/that-thing-on-the-z-index.html
說道定位就不得不提z-index，這個家伙在IE7以下又是一個坑爹的貨，了不起哪天各位又會碰到，反正我組員就碰到了，在IE7下，這個就是個混蛋！！！
關于html堆棧的那塊，各位可以看看博客園寒冬的博客，堆棧順序對z-index影響很大，我這里就不描述了。
我們遇到z-index時候，會很天真的認為z-index設置的越大時候，便應該更靠近我們，但是定位元素多了后，卻總是發現這樣那樣的bug一大堆！！！（IE7以下尤其惡心），具體這塊的拓展可以看看聶微東大哥的博客，關于z-index的描述已經十分詳盡了，我這里簡單說下：
每一個定位元素都有其根元素，當根元素為定位元素時，該元素的子元素若是也出現定位元素，子元素將受到父元素z-index的制約。
借用東哥一句話，元素要靠前也是拼爹的！
inline與inline-block
關于PS中的問題，感覺沒人關注，我這里也不花精力去描述了，但是有個東西應該提出來：
我們上次說了，其實IE6/7是支持inline-block的，只不過塊級元素對其支持不是很好罷了，但是我這里想把inline-block再一次提出來說一下，因為我們可能被他的名字迷惑了！！！
inline-block便應該包含inline與block的特性，對不！
是的，他包含了block的特性，但是我不認為他包含了inline的特性，因為inline的特性的核心是inline boxes，那么我們的inline-block擁有嗎？
PS：答案是擁有的，我私下搞了半個小時，昨天以為沒有inline boxes，以為發現新大陸了，丟人啦，，，，
結語
我今天又唧唧歪歪說了一大堆，也不知道各位有沒有什么收獲呢，明天我們還是一起來研究點有意義的事情吧，我感覺我對行內元素還是不夠熟悉，明天我們就一起看看行內元素哇？?
本文轉自葉小釵博客園博客，原文鏈接：http://www.cnblogs.com/yexiaochai/p/3141582.html，如需轉載請自行聯系原作者
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀
接著昨天的內容寫，為了保證內容連續性，這里還是把昨天的內容拷了過來。
請用現代瀏覽器測試
引出問題
有圖有真相，我們來看一個智聯招聘里面經常出現的圖層：
他這個是沒有什么問題的，我們來簡單看看其實現：
View Code 復制代碼 1 <div id="zbwJobSearch"> 2 ? ? ? ? ?<div style="width: 710px;" class="sPopupDiv"> 3 ? ? ? ? ? ? ?<div class="sPopupTitle213 sPopupTitle"> 4 ? ? ? ? ? ? ? ? ?<h1> 5 ? ? ? ? ? ? ? ? ? ? ?選擇職位</h1> 6 ? ? ? ? ? ? ? ? ?<div class="sButtonBlock"> 7 ? ? ? ? ? ? ? ? ? ? ?<a οnclick="return zbw.PopupDiv.allIns['buttonSelJobType'].fnClickAll()" href="#" 8 ? ? ? ? ? ? ? ? ? ? ? ? ?class="blueButton">不限</a> <a οnclick="return zbw.PopupDiv.allIns['buttonSelJobType'].fnClickClose()" 9 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?href="#" class="blueButton">關閉</a></div> 10 ? ? ? ? ? ? ? ? ?<div class="clear"> 11 ? ? ? ? ? ? ? ? ?</div> 12 ? ? ? ? ? ? ?</div> 13 ? ? ? ? ? ? ?<div class="clear"> 14 ? ? ? ? ? ? ?</div> 15 ? ? ? ? ? ? ?<div class="sPopupBlock"> 16 ? ? ? ? ? ? ?</div> 17 ? ? ? ? ?</div> 18 </div> 復制代碼
他一開始便有一個容器在頁面上，看著我們這個“zbwJobSearch”的容器，他是一個一般流的東西，里面放了3個絕對定位的東西，從這里看出，他這個不只是用于職位選擇還有城市選擇什么的。。。。
然后我們把多余的東西給去掉，點擊了一下我本來以為會發送http請求什么的，重新獲取數據，再生成我們看到的那顆樹，但是解壓js后發現這個東西好像被寫到了js中，基本就是生成了這個東西：
生成的職位列表 他是一個表格，里面有很多事件！！！
我們這個td里面有一個span元素，給span了一個click事件，點擊后會彈出我們要的結果：
然后進行最后的操作。
分析問題
好了，到了這里我們不知道我把問題解釋清楚沒有：
1 點擊外部按鈕便彈出了我們要的第一個彈出層。
2 點擊其中的“加號”或者文字便彈出具有多選框的可選項
3 選擇項目點擊確定。
以上幾個做完，我們的流程便結束了。
優化方案
不知從什么時間開始，我有了一點代碼潔癖，看著這個代碼我怎么就感覺有點不爽，他這個東西主要有以下問題：
1 table渲染速度慢
2 td/span有太多的事件，過多的事件綁定對我們的性能也有影響。
3 他的click函數全部寫到了標簽上（仁者見仁，我是非常不喜歡這樣做）
其它
我們來看看，他其它地方其實做了一定處理:
<span οnclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['348','物流/倉儲'])" class="availItem">物流/倉儲</span> 為了防止命名沖突，我們看看這家伙定義的命名空間可長可長了。長到我都不想看了。。。。
好了暫時其它問題我這里還沒發現，只不過我認為其中幾個圖片按鈕相關可以用標簽實現啦。。。
既然說都說了這么多，那我們不如先來寫一個唄，寫了再繼續我們的問題吧！
實現職位選擇功能
我們現在一起來實現這個職位選擇功能，所以我們先分析下我們需要干些什么：
① 點擊text在text處出現彈出層
② 彈出層出來后，我們點擊其中的“加號”或者文字便彈出第三個彈出層
③ 選擇第三個彈出層里面的checkbox項目最后點擊確定后便將選擇插入text（多項以分號分割）
若是想要優化的話，也許可以嘗試點擊后再加載數據再生成dom，一旦生成后便將dom緩存起來，我們這里作為demo就不搞那么多事情了。
第一步，準備工作
下拉選擇文本
實現功能前，我們先準備一點點小東西，第一個就是長得像下拉菜單的文本框：
復制代碼 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 ? ? <title></title> 4 ? ? <style type="text/css"> 5 ? ? ? ? .dropText { display: inline-block; border: 1px solid #B6B6B6; border-right: none; border-radius: 5px 0 0 5px;? cursor: pointer; margin-right: 20px; } 6 ? ? ? ? .dropText input { border: none; border-radius: 5px 0 0 5px; cursor: pointer; padding-left: 5px; } 7 ? ? ? ? .dropText span { display: inline-block; margin-right: -10px; width: 20px; border: 1px solid #B6B6B6;? border-radius: 0 5px 5px 0; margin: -1px -20px -1px 0; text-align: center; padding: 4px 0 4px 8px; } 8 ? ? ? ? .dropText i { display: inline-block; border: 6px solid black; border-color: black transparent transparent;? border-bottom: none; vertical-align: 3px; } 9 ? ? </style> 10 ? ? <script src="../../scripts/jquery-1.7.1.js" type="text/javascript"></script> 11 ? ? <script type="text/javascript"> 12 ? ? ? ? $(document).ready(function () { 13 ? ? ? ? }); 14 ? ? </script> 15 </head> 16 <body> 17 ? ? <div style="margin: 100px auto; padding-left: 100px;"> 18 ? ? ? ? <div class="dropText" id="dropText"> 19 ? ? ? ? ? ? <input type="text" placeholder="請選擇職位" /><span><i></i> </span> 20 ? ? ? ? </div> 21 ? ? ? ? <span>dddd</span> 22 ? ? </div> 23 </body> 24 </html> 復制代碼
我們來看看我們形成的這個框，這個在現代瀏覽器還能看，而且各位千萬不要小看這個東西，這個東西真不像各位想象那么簡單，比如我這個代碼就有很大的優化空間！
PS：各位看到我的span里面多了一個 我為什么會這么做？不這么做有什么影響？i被設置為inline-block對整體行對齊有什么影響，這塊代碼還可以如何優化？這個問題暫時留給各位了，我們下來再一起解決，這個對行內元素的理解有莫大的幫助，請各位動手吧。
十字開關
復制代碼 1 <style type="text/css"> 2 /*十字開關*/ 3 .croSwitch { display: inline-block; border: 1px solid #108efe; border-radius: 4px; width: 16px;? height: 16px; text-align: center; position: relative; cursor: pointer; } 4 .croSwitch i { background-color: #108efe; border-radius: 6px; position: absolute; } 5 ? ? ? ?? 6 .croSwitch .horizontal { width: 12px; height: 2px; left: 2px; top: 7px; } 7 .croSwitch .vertical { height: 12px; width: 2px; top: 2px; left: 7px; } 8 .cls .vertical { display: none; } 9 </style> 10? 11 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 12 <span class="croSwitch cls"><i class="horizontal"></i><i class="vertical"></i></span> 復制代碼
雖然很丑但是很溫柔。。。
Ps：請思考若是外層span不設置高度會有什么后果
好啦，小東西大概懂弄好了，我們現在來組織職位的dom結構吧。
職位列表樣式
我們首先根據上面的表格，使用jquery操作他生成如下結構：
最新的結構
好了，我們現在來調整一下樣式。
由于這個家伙著實太丑了，我放棄了，我這里上傳個圖片好了。。。。
可運行代碼：
基本列表樣式
PS：第三個坑，不知道各位發現沒，就算使用背景圖片，我們的小圖片看上去感覺還是有一些問題呢，我們是不是應該看看呢？
好了，我們將我們第一階段的代碼連起來：
帶交互代碼 三層彈出：
我們在樣式上做一點優化，加上鼠標hover效果，其它暫時不管。于是我們來看看他點擊時候再彈出功能如何實現呢？我們這里看看原來的代碼：
<span οnclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['306','生產/加工/制造'])" class="availItem">生產/加工/制造</span> 我們看著，他這里有一個id，所以我這里有這樣一個實現思路：
① 這個id必定對應著自己的id，我們根據此id可以選出其子項（根據省id可以得出市id）
② 由于他這個數據是一次性讀出的，所以父級id對應子項應該已經緩存起來了，可以是字符串，也可以是dom結構
③ 然后我們這里先預先定義一個這樣的結構：
復制代碼 1 var jobListObj = { 2 '1': 'dom', 3 '2': 'dom', 4 '3': 'dom', 5 '4': 'dom' 6 } 復制代碼 現在的邏輯便是，我們點擊“加號”或者文字，從而獲取我們的id（1-4），我們根據id獲取dom，我們再定位我們的dom在應該出現的位置，整個邏輯結束。
于是我們來測試下我們的思路是否正確，因為原來就沒有綁定id上，我們現在為四個角搞一個id即可，四個方向上能正常顯示，我們這里就不管了。
PS：寫到這里其實已經離題了，想說的問題還沒說呢，我們其實沒必要實現這個功能的，但是都走到這一步了只能硬著頭皮寫下去了。。。
最后形成的代碼：
View Code 演示效果，可運行（友情提示請使用IE9+）
咳咳，離題離的離譜
昨天最初想寫的東西和以上的東西沒有多大關聯，偏題偏得離譜啊！！！
我當時很臭屁的認為自己能1,2個小時完成這個功能來著，最后發現這家伙還真不是那么簡單的。。。這不，今天又花了2個小時才搞出這么一個四不像的東西，而且我也不想繼續搞這個了，因為這次的主題不是這個，職位選擇框我們暫時就這個樣式吧，以后有機會再形成插件。
現在我們開始進行下一步探討，看看問題出現在哪。
正文開始
我們看到，這個職位選擇框，其實本身沒有什么問題，但是卡了組員1.5天的東西到底是什么呢？
其實是需求，因為需求變更，原來放在頁面上，好好的元素，現在被放在了一個彈出層里面，于是各種各樣的問題都出來了。。。。
① 彈出層的遮蓋層z-index過大，遮蓋了我們的職位層
② 彈出層本身的z-index過大，也遮蓋了我們的職位層
但是以上兩個問題都比較好處理，比較難處理的出來了：
這個項目之前的項目人員并不是像我這樣將各個彈出層獨立出來，都是以body為包含快（containing block），而是放在了一個div里面
并且將這個div放進了彈出層那個容器里面，于是我們來看看可能出現的問題：
① 由于absolute的包含快有所不同，其依賴最近的布局元素，所以之前js計算位置的方法可能失效
② 不知道原來處于什么考慮，代碼中div容器布局為relative。。。。。其定位方法十分詭異
③ 奇怪的現象就是二級彈出層正常顯示，三級彈出層你壓根找不到！！！
以上便是組員遇到的問題，還有一個客觀的因素就是原來的js依次分布到三個不同的地方，然后代碼又全部壓縮過了，我處理的時候還需要解壓什么的，而且原來的代碼中有很多地方沒有分號，沒有報錯真是個奇跡（其實經常出現莫名的js錯誤啦，總之坑很多）。
我看著代碼后不一會就發現了問題所在，問題本身并不難，解決也比較輕易，但是知不知道就很重要了。
原來實現思路：
① 由于裝第一個彈出層的div是relative定位的，所以他定位到下拉框的實現方法和我們想象的不一樣，是相對于div的位置，而不是body
他這個實現方案，我們不予評價，但是就這種方法要傷害多少我多少腦細胞，我就確實不想去想了。。。這里我居然還有點佩服原來開發的思維能力了。。。
② 他第一步，彈出層居然還能精準定位到下拉文本，但是當他再點擊彈出層里面的文字準備彈出最終的東西時，終于開始悲劇了。。。
我那兩個倒霉的組員要干神馬事情呢，他們面臨的又是什么呢：
① 在絕對定位彈出層上面（parent）有個正常流文本下拉文本框與div容器（div），并且該容器是relative定位的
② div中有2塊彈出層（tan1，tan2），點擊parent上面的下拉文本便彈出tan1，并且其定位必須精準，1像素只差都會很難看
③ 在tan1出來后，便點擊tan1中的文字，根據該文字元素定位tan2
PS：不知道你們暈沒有，反正我是暈了
人家這個插件本來是用于普通流的，其根元素為body，但是現在搞到彈出層里面來了，所以出現了這些問題。
我最后就直接總結了一下他這個最大的問題，就是實現過于復雜，所以昨天才忍不住自己寫了一個（雖然效果不好。。。）
當然，最后我的解決方案更加詭異，這里就不說明了，因為沒有什么意義，但是根據這個東西，我卻提煉了一點點很有意思的東西與大家分享呢。這也是組員找不到問題的原因。
relative與鼠標點的定位
有例子有真相！！！
View Code 各位看看我們這個代碼干的事情：
復制代碼 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 ? ? <title></title> 4 ? ? <style type="text/css"> 5 ? ? ? ? body { font: 12px 'PTSansRegular',Arial,Helvetica,sans-serif; background: #D1D1D1; } 6 ? ? ? ? ul, li { margin: 0; padding: 0} 7 ? ? ? ? li { list-style: none; } 8 ? ? ? ?? 9 ? ? ? ? #tabs_container { width: 400px; height: 200px; background: white;} 10 ? ? ? ? #tabs { border-bottom: 1px solid #1C87D5; padding: 5px 5px 0; ?width: 690px; margin: 0 auto; ?} 11 ? ? ? ? #tabs li { padding: 5px 10px; ?cursor: pointer; display: inline-block; background: #1C87D5; color: White; } 12 ? ? ? ? #tabs li.sec { color: black;} 13 ? ? ? ?? 14 ? ? ? ? #parent { width: 700px; height: 400px; background: white; margin: 0 auto; position: relative; } 15 ? ? ? ? #parent div { filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; font-weight:bold; background: red; position: absolute; } 16 ? ? </style> 17 </head> 18 <body> 19 ? ? <ul id="tabs" > 20 ? ? ? ? <li type="draw" class="sec">畫矩形框</li> 21 ? ? ? ? <li type="drag">拖到矩形框</li> 22 ? ? </ul> 23 ? ? <div id="parent"> 24 ? ? </div> 25 ? ? <div id="state"></div> 26 </body> 27 </html> 復制代碼 ① parent容器的定位是relative
② 我們在parent里面畫的div是absolute
③ 但是，我們div定位是根據鼠標的x/y確定的，而這個是相對于body的，所以我們這里會錯位（因為div是相對于parent布局，不是body）
④ 為了解決錯位問題，我們便要用x/y減去parent的offset top與left
此塊單獨處理問題不大，就怕頁面中彈出層過多時候導致你已經分不清誰是誰的包含快了，所以便會出現錯位問題，這也是同事遲遲不能解決問題的癥結點。
z-index
擴展知識：http://www.qianduan.net/that-thing-on-the-z-index.html
說道定位就不得不提z-index，這個家伙在IE7以下又是一個坑爹的貨，了不起哪天各位又會碰到，反正我組員就碰到了，在IE7下，這個就是個混蛋！！！
關于html堆棧的那塊，各位可以看看博客園寒冬的博客，堆棧順序對z-index影響很大，我這里就不描述了。
我們遇到z-index時候，會很天真的認為z-index設置的越大時候，便應該更靠近我們，但是定位元素多了后，卻總是發現這樣那樣的bug一大堆！！！（IE7以下尤其惡心），具體這塊的拓展可以看看聶微東大哥的博客，關于z-index的描述已經十分詳盡了，我這里簡單說下：
每一個定位元素都有其根元素，當根元素為定位元素時，該元素的子元素若是也出現定位元素，子元素將受到父元素z-index的制約。
借用東哥一句話，元素要靠前也是拼爹的！
inline與inline-block
關于PS中的問題，感覺沒人關注，我這里也不花精力去描述了，但是有個東西應該提出來：
我們上次說了，其實IE6/7是支持inline-block的，只不過塊級元素對其支持不是很好罷了，但是我這里想把inline-block再一次提出來說一下，因為我們可能被他的名字迷惑了！！！
inline-block便應該包含inline與block的特性，對不！
是的，他包含了block的特性，但是我不認為他包含了inline的特性，因為inline的特性的核心是inline boxes，那么我們的inline-block擁有嗎？
PS：答案是擁有的，我私下搞了半個小時，昨天以為沒有inline boxes，以為發現新大陸了，丟人啦，，，，
結語
我今天又唧唧歪歪說了一大堆，也不知道各位有沒有什么收獲呢，明天我們還是一起來研究點有意義的事情吧，我感覺我對行內元素還是不夠熟悉，明天我們就一起看看行內元素哇？?
本文轉自葉小釵博客園博客，原文鏈接：http://www.cnblogs.com/yexiaochai/p/3141582.html，如需轉載請自行聯系原作者
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀
總結
以上是生活随笔為你收集整理的【position也可以很复杂】当弹出层遇上了鼠标定位（下）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： redis4.0之基于LFU的热点key
- 下一篇： 磁盘阵列介绍、进程的查看管理、日志文件的