1. 程式人生 > >CSS之實現圖片疊加的層疊層問題

CSS之實現圖片疊加的層疊層問題

在工作中,也就是在微信小程式開發的時候經常用到圖片疊加及層疊層的問題,但都比較好解決,就是沒有好好研究其概念原理上的東西。因為自己技術及理解有限,也在網上找了很多參考資料,學習到了很多東西,簡單分享一下。

(一)實現效果

說明一下:是通過微信開發者工具展示的小程式效果;
result

(二)實現分析

1、效果圖展示的是兩張圖片疊加(一個是上傳的圖片一個是右上角的刪除按鈕圖示)。實現的方式也是很簡單:
父級容器設定樣式:

position:relative;
top:...
left:...
。。。(設定其他屬性樣式)

子級容器設定樣式(放兩張圖片的):
第一張圖片是設定樣式是佔滿整個父級的所以不用設定position;
第二張圖片就要設定position:absolute;

(脫離常規文件流,當不會脫離父級下的文件流)

position:absoulte;
top:...
left:...
。。。(其他樣式)

如果還需要設定層疊層顯示問題,比如上面的子級容器下的第二張圖片想越過父級容器設定並顯示出來(因為文件流的問題)可以設定:z-index:1;
沒設定前,刪除符號會被遮擋:
遮擋了
設定後,不會被遮擋了:
設定後

(三)推薦參考資料