在編寫功能時總是會出現很多意想不到的問題，現在就講講證券通投顧網遇到的兩個問題，通過舉一個相似的例子來解說。

<1>元素互相獨立，不存在包含於被包含

選擇城市的按鈕，為它綁定點擊事件，點擊後就彈出城市列表層，城市列表層設置了position與z-index的值來進行布局，然後再點擊選擇城市按鈕，點擊事件就不起作用了，反而是城市列表層的點擊事件起作用，這說明只有顯示在最上面的一層綁定的事件可以起作用，即使最上面的一層沒有全部蓋住下面的內容，下面的內容綁定的事件也不起作用，所以要想讓選擇城市按鈕綁定的點擊事件起作用，就需要為其設置position與z-index值，而且z-index值必須要大於城市列表層設置的z-index的值。

總結：當整個頁面有元素設置position與z-index的值時，為元素綁定事件，只有顯示在最上面一層的元素的事件可以起作用。

<2>元素存在包含關系

這個問題和第一個問題有點相似，但又有點不同。城市列表裏有多個城市，需要使用事件冒泡取到事件目標，即點擊的城市，每個城市都被包含在城市列表裏了，雖然城市列表這個上級元素已經設置了position與z-index的值，但這並不意味著子元素就和父級元素在同一層，所以在使用事件冒泡獲取事件目標，即子元素時，根本取不到子元素，取到的依然是父級元素，說明子元素與父級元素不在同一層，這個怎麽解決呢？我發現只要為子元素設置position:relative就可以獲取到，而且不需要再設置z-index的值了。

總結：當父級元素設置了position與z-index的值，子元素也需要設置position的值，不然事件冒泡獲取事件目標時，取不到子元素。

position布局影響點擊事件以及冒泡獲取事件目標