之前項目中遇到這里總結下：

這個原理主要是使用了 ::before或者::after 這個偽元素，和 :hover 這個偽類，

關于偽類和偽元素需要知道：

偽類及在當前元素被出發后添加一些CSS樣式，偽類與偽元素是預先定義的，獨立于文檔元素的，能后被瀏覽器自動識別，處于特殊狀態的元素稱為偽類，偽元素指元素中特變的一部分。偽類：以“：”開始，在冒號前后不能出現空白。

偽元素可以在觸發之后添加一些，不在文檔樹里的內容。偽類：偽元素表示某元素的部分內容，雖然在邏輯上存在，但在文檔樹中并不存在與之對應的部分。

想做成這個樣子，這個ElementUI的上傳組件的樣式。

做完之后是這個樣子的：

可能我們還需要知道一點定位的知識；CSS提供三種定位機制：普通流，定位(position)，浮動(float)。

position屬性：

可以將元素從頁面流中偏移或分離出來，然后設定其具體的位置(top,bottom,right,left)，屬性值如下；

當position的屬性值為relative，absolute或fixed時，可以使用元素的偏移屬性進行重新定位，當屬性為static時,會忽略偏移屬性以及z-index等相關屬性。使用絕對定位相對定位時，會出現元素重疊，可以使用z-index屬性設置元素之間的疊放順序，取值為auto或數值時，數值越大越上層。在頁面坐標中存在X右Y下Z外，

然后我們看一個Demo

Hello, world!

CSS

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。