position屬性脫離文檔流覆蓋其他內容


微信小程序案例

今天敲代碼的時候 遇到了一個問題 就是在寫一個購物小程序的時候 訂單那一塊有一個徽標 當時記得小程序好像是有組件的 但是沒找到 就手動寫了一個 看上去效果是實現了 樣子還不錯

但是當我退出登錄 從頭開始測試小程序的時候 發現了一個問題

下邊的小徽標和icon 因為設置了position屬性的 relative和absolute 脫離了標准文檔流,把彈出來的授權框框覆蓋了


之前沒有出現過這種問題,在改了改還是這個樣子 就去百度了一下 發現解決的方法有很多種

給父元素設置寬高 (這個是最常見的 但是針對於這種情況 是不起作用的)
給被覆蓋的元素也設置position:relative
  這個方法  不知道在其他情況下有沒有有用,但是在這種情況下 依舊是無效的
給被覆蓋的元素設置z-index 屬性值越大 顯示層級越高
  這個方法 也是我在百度之前最先嘗試的方法,但神奇的是 依舊沒有任何效果

這是剛開始寫的位置 因為覺得方便 寫到了最上邊

更改過后 放到了最后

將被覆蓋的代碼 放到整體代碼最后 覆蓋之前的代碼
  這個最簡單的方法 不需要設置任何樣式 但是成功了 因為是彈框 所以放到哪里都可以 不需要考慮布局

這就是最終的效果
算是一個坑吧 以后就長記性了
每天一個小知識點,加油!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM