CSS 為實現重疊效果，將 margin-top 設為負值時，div 背景被 img 圖片遮擋 一、未實現重疊效果 <body> <img src="https://cdn.uviewui.com/uview/swiper/swiper2.png" style="width: 375px;" alt ...
CSS 為實現重疊效果，將 margin-top 設為負值時，div 背景被 img 圖片遮擋
一、未實現重疊效果
<body>
<img
src="https://cdn.uviewui.com/uview/swiper/swiper2.png"
style="width: 375px;"
alt=""
srcset=""
/>
<div style="width: 375px;height: 80px;background: green;">
<p style="text-align: center;color: #fff;">
CSS 為實現重疊效果，將 margin-top 設為負值時，div 背景被 img 圖片遮擋
</p>
</div>
</body>
效果：
二、實現重疊效果，但 div 背景被遮擋
通過將 div margin-top 設為負值實現 div 部分重疊在 img 圖片上。
<body>
<img
src="https://cdn.uviewui.com/uview/swiper/swiper2.png"
style="width: 375px;"
alt=""
srcset=""
/>
<div style="width: 375px;height: 80px;background: green; margin-top: -50px;">
<p style="text-align: center;color: #fff;">
CSS 為實現重疊效果，將 margin-top 設為負值時，div 背景被 img 圖片遮擋
</p>
</div>
</body>
效果：
由效果圖可知，存在 div 的綠色背景被遮擋問題，這時如果通過z-index來設置層疊順序是無效的。
三、解決實現重疊效果時 div 背景被遮擋問題
方法一、div 設置 position: relative;
通過將 div 設置為 position: relative; 解決實現重疊效果時 div 背景被遮擋問題。
<body>
<img
src="https://cdn.uviewui.com/uview/swiper/swiper2.png"
style="width: 375px;"
alt=""
srcset=""
/>
<div
style="width: 375px; height: 80px; background: green; margin-top: -50px; position: relative;"
>
<p style="text-align: center;color: #fff;">
CSS 為實現重疊效果，將 margin-top 設為負值時，div 背景被 img 圖片遮擋
</p>
</div>
</body>
效果：
方法二、div 設置 display: inline-block;，並設置父容器寬度
<body style="width: 375px;">
<img
src="https://cdn.uviewui.com/uview/swiper/swiper2.png"
style="width: 375px;"
alt=""
srcset=""
/>
<div
style="width: 375px;height: 80px;background: green; margin-top: -50px; display: inline-block;"
>
<p style="text-align: center;color: #fff;">
CSS 為實現重疊效果，將 margin-top 設為負值時，div 背景被 img 圖片遮擋
</p>
</div>
</body>
上述代碼中，同時設置了父容器 body 的寬度和 div 的 display: inline-block;。
效果：
方法三、div 設置position: absolute; top: 100px;，並去除margin-top: -50px;，同時設置父容器position: relative;
<body style="position: relative;">
<img
src="https://cdn.uviewui.com/uview/swiper/swiper2.png"
style="width: 375px;"
alt=""
srcset=""
/>
<div
style="width: 375px;height: 80px;background: green; position: absolute; top: 100px;"
>
<p style="text-align: center;color: #fff;">
CSS 為實現重疊效果，將 margin-top 設為負值時，div 背景被 img 圖片遮擋
</p>
</div>
</body>
上述代碼中，同時設置父容器 body 的position: relative;和 div 的position: absolute; top: 100px;，並去除了 div 的margin-top: -50px;。
效果：
作者：飛仔FeiZai
出處：https://www.cnblogs.com/yuzhihui/p/17246928.html
聲明：歡迎任何形式的轉載，但請務必註明出處！！！
更多相關文章
-
一、問題描述及操作 應用集成Health Kit SDK後，在華為手機上進行登錄授權時，返回錯誤碼50063。 1、查看相關錯誤碼。‘50063’在Health Kit錯誤碼中的描述是“安裝的HMS Core APK版本不匹配，無法調用介面。”提供的解決方案是“請安裝最新版本的HMS Core（AP ...
-
React舊版的生命周期 初始化階段：由ReactDOM.render()觸發 初次渲染 1.constructor() 2.componentWillMount() 3.render() 4.componentDidMount() 一般在這個裡面做一些初始化的事情，如定時器，發送網路請求，訂閱消息 ...
-
前言 前面我們簡單的瞭解了 vue 初始化時的一些大概的流程，這裡我們詳細的瞭解下具體的內容; 內容 這一塊主要圍繞init.ts中的initInjections進行剖析，初始化生命周期之後緊接著。 initInjections initInjections的方法位於scr/core/instanc ...
-
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 背景 大家在日常開發中應該經常會有需要切換不同環境地址的情況。當一個項目代碼切換環境地址時，vue-cli沒有能夠感知文件的變化，所以代理的還是舊的地址，所以通常我們需要執行npm run serve進行項目重跑，而項目重跑往往意味著長時 ...
-
pdf文件能夠比較好的保留源格式，傳輸也比較方便，現PC端瀏覽器基本都可直接查看pdf文件，只是界面風格不怎麼統一，但是手機端查看pdf文件就不能很好的只“預覽”，往往都是自動下載到本地再查看，今天分享pdf.js，主要用於線上pdf預覽，平時我使用比較多的場景就是培訓手冊。 我用的是1.1.159 ...
-
？問題 ：如何添加token,解決鑒權問題 方案：通過登錄頁面，發送請求，獲取到token值，並把token值存儲（localStorage、sessionStorage、cookieStore），示例如下： <template> <el-form label-width="80px"> <el-f ...
-
使用 glup 打包組件庫並實現按需載入 當我們使用 Vite 庫模式打包的時候,vite 會將樣式文件全部打包到同一個文件中,這樣的話我們每次都要全量引入所有樣式文件做不到按需引入的效果。所以打包的時候我們可以不讓 vite 打包樣式文件,樣式文件將使用 gulp 進行打包。那麼本篇文章將介紹如何 ...
-
在使用阿裡雲伺服器部署完flask項目後，實際訪問網站發現網站載入速度慢 問題分析： 打開開發者工具-網路，發現echarts文件及其3D庫載入時間過長，頁面空白時間長，用戶等待時間長，如下圖 解決辦法： 1、利用CDN內容分髮網絡使用戶根據自己網路的特點更快、更穩定地訪問到節點伺服器中的資源，從而 ...
