首頁  >  文章  >  web前端  >  css裡怎麼將圖片置於元素最上面

css裡怎麼將圖片置於元素最上面

WBOY
WBOY原創
2021-12-06 09:45:0516056瀏覽

在css中,可以利用「z-index」屬性將圖片置於元素最上面,該屬性用於設定元素的堆疊順序,屬性的值越大,元素顯示的順序也就越靠前,語法為「圖片元素{z-index:number;}」。

css裡怎麼將圖片置於元素最上面

本教學操作環境: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。

css裡怎麼將圖片置於元素最上面

2、在css標籤內,透過class(mypic)定義img的樣式,設定圖片的位置屬性為絕對定位,距離頂部20px,距離左邊20px,並透過z-index設定img的層次為1,即在div的上面,從而實現圖片置頂。

css裡怎麼將圖片置於元素最上面

在瀏覽器中開啟test.html文件,查看實現的效果。

css裡怎麼將圖片置於元素最上面

總結:

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn