在css中,可以利用「z-index」屬性將圖片置於元素最上面,該屬性用於設定元素的堆疊順序,屬性的值越大,元素顯示的順序也就越靠前,語法為「圖片元素{z-index:number;}」。
本教學操作環境:windows10系統、CSS3&&HTML5版、Dell G3電腦。
css裡怎麼將圖片放在元素最上面
#在css中,透過定位,可以使用z-index來定義元素的層次關係。下面舉例講解css中圖片怎麼置頂。
1、新建一個html文件,命名為test.html,用於講解css中圖片怎麼置頂。使用div標籤建立一個模組,使用img標籤建立一張圖片。分別為div和img標籤新增一個class屬性,用於樣式的定義。
在css標籤內,透過class(mytest)定義div的樣式,設定它的高度、寬度為400px,背景顏色為灰色,並使用z-index設定div的層次為0。
2、在css標籤內,透過class(mypic)定義img的樣式,設定圖片的位置屬性為絕對定位,距離頂部20px,距離左邊20px,並透過z-index設定img的層次為1,即在div的上面,從而實現圖片置頂。
在瀏覽器中開啟test.html文件,查看實現的效果。
總結:
1、使用div標籤建立一個模組,使用img標籤建立一張圖片。
2、分別為div和img標籤新增一個class屬性,用於樣式的定義。
3、在css標籤內,透過class(mytest)定義div的樣式,設定它的高度、寬度為400px,背景顏色為灰色,並使用z-index設定div的層次為0。
4、在css標籤內,透過class(mypic)定義img的樣式,設定圖片的位置屬性為絕對定位,距離頂部20px,距離左邊20px,並透過z-index設定img的層次為1,即在div的上面,從而實現圖片置頂。
(學習影片分享:css影片教學)
以上是css裡怎麼將圖片置於元素最上面的詳細內容。更多資訊請關注PHP中文網其他相關文章!