微信小程序案例
今天敲代碼的時候 遇到了一個問題 就是在寫一個購物小程序的時候 訂單那一塊有一個徽標 當時記得小程序好像是有組件的 但是沒找到 就手動寫了一個 看上去效果是實現了 樣子還不錯
但是當我退出登錄 從頭開始測試小程序的時候 發現了一個問題
下邊的小徽標和icon 因為設置了position屬性的 relative和absolute 脫離了標准文檔流,把彈出來的授權框框覆蓋了
之前沒有出現過這種問題,在改了改還是這個樣子 就去百度了一下 發現解決的方法有很多種
給父元素設置寬高 (這個是最常見的 但是針對於這種情況 是不起作用的)
給被覆蓋的元素也設置position:relative
這個方法 不知道在其他情況下有沒有有用,但是在這種情況下 依舊是無效的
給被覆蓋的元素設置z-index 屬性值越大 顯示層級越高
這個方法 也是我在百度之前最先嘗試的方法,但神奇的是 依舊沒有任何效果
這是剛開始寫的位置 因為覺得方便 寫到了最上邊
更改過后 放到了最后
將被覆蓋的代碼 放到整體代碼最后 覆蓋之前的代碼
這個最簡單的方法 不需要設置任何樣式 但是成功了 因為是彈框 所以放到哪里都可以 不需要考慮布局
這就是最終的效果
算是一個坑吧 以后就長記性了
每天一個小知識點,加油!