關于iframe中使用fixed定位的一些問題

xuexiangjys 發布于2019-04-23 13:20 / 3383人閱讀

摘要：先來看看的定義生成絕對定位的元素，相對于瀏覽器窗口進行定位但是在中使用定位，實際上是相對于窗口進行定位，原因在于類似于創建了一個瀏覽器窗口，在使用一些獲取鼠標位置以及元素位置等方法的時候把當作瀏覽器窗口來處理就行。

先來看看position: fixed；的定義：生成絕對定位的元素，相對于瀏覽器窗口進行定位；

但是在iframe中使用fixed定位，實際上是相對于iframe窗口進行定位，原因在于iframe類似于創建了一個瀏覽器窗口，在使用一些獲取鼠標位置以及元素位置等方法的時候把iframe當作瀏覽器窗口來處理就行。

以下是一些在iframe中使用fixed需要考慮的常用js事件對象屬性與方法:

獲取鼠標的位置：

　　　　e.clientY // 獲取鼠標在瀏覽器視窗的Y坐標，在iframe中相對于iframe窗口

　　　　e.screenY? //?獲取的是鼠標相對于屏幕的上邊距，不考慮iframe因素，

獲取元素的偏移量：

　　　　var position = Object.getBoundingClientRect();? //用于獲取某個元素相對于瀏覽器視窗的位置集合，在iframe中相對于iframe視窗

　　　　　　position.top? //獲取元素?"頂部"?距離瀏覽器視窗?"頂部"?的距離

　　　　　　position.bottom? //獲取元素 "底部" 距離瀏覽器視窗?"頂部"?的距離

　　　　　　position.left //獲取元素?"左側"?距離瀏覽器視窗?"左側"?的距離

　　　　　　position.right? //獲取元素?"右側"?距離瀏覽器視窗?"左側"?的距離

　　　Object.offsetTop? //獲取元素距離最近含有 ”定位“ 屬性標簽左側的距離

GPU云服務器云服務器 iframe的使用用法 vps日常維護中的一些要點總結關于IFRAME 關于javascript的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1738.html

前端頁面總結

摘要：重疊元素元素的定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素屬性指定了一個元素的堆疊順序哪個元素應該放在前面，或后面一個元素可以有正數或負數的堆疊順序具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。元素的默認值，沒有定位，遵循正常的文檔流對象。靜態定位的元素不會受到 top, bottom, left, right影響。 fixed 定位元素的位置相對于瀏覽器窗口是固定位...

番茄西紅柿 2019-04-22 16:12 評論0 收藏0
mip-semi-fixed 走走又停停

摘要：代碼設計融合了業界兩種實現方案，非下頁面中通過更換實現，下的頁面由于要特殊處理元素，所以會科隆一個節點，具體代碼參考開源代碼。子節點必選項需要滑動后懸浮的代碼的容器，組件科隆的也是這個節點。寫在前面 MIP 中懸浮元素的特殊情況其實組件上線已經有一段時間了，最開始看到這個需求是站長提交了一個這中功能的組件過來，不過看過代碼立刻就想到了 MIP 頁面的特殊性：從結果頁打開的 MIP ...

yiliang 2019-08-20 15:31 評論0 收藏0
web前端 —— 移動端知識的一些總結

摘要：打個招聘廣告杭州阿里巴巴招前端想去西溪的也可幫推薦，比較缺人，機會多多廣告位長期有效，有興趣簡歷我郵箱個人在移動端的一些總結歸納，有新的知識點會一直更新一部分用做動畫時，變形盡量通過來實現，而不是用，等屬性。不過的事件有一個事件穿透的問題。打個招聘廣告：杭州阿里巴巴B2B 招前端（想去西溪的也可幫推薦），比較缺人，機會多多！廣告位長期有效，有興趣簡歷我郵箱：854936875@q...

Astrian 2019-08-28 18:19 評論0 收藏0
web前端 —— 移動端知識的一些總結

摘要：打個招聘廣告杭州阿里巴巴招前端想去西溪的也可幫推薦，比較缺人，機會多多廣告位長期有效，有興趣簡歷我郵箱個人在移動端的一些總結歸納，有新的知識點會一直更新一部分用做動畫時，變形盡量通過來實現，而不是用，等屬性。不過的事件有一個事件穿透的問題。打個招聘廣告：杭州阿里巴巴B2B 招前端（想去西溪的也可幫推薦），比較缺人，機會多多！廣告位長期有效，有興趣簡歷我郵箱：854936875@q...

BetaRabbit 2019-08-22 10:58 評論0 收藏0