div標簽被object標簽遮蓋?

来源:https://www.cnblogs.com/guanhx/archive/2020/03/31/12601343.html
-Advertisement-
Play Games

關於object標簽,現在已經很少使用了,但在考慮到相容性的問題上,還是會用到object標簽的。 在對object標簽的使用中,會出現播放視頻的 object 標簽遮蓋住其他 div 標簽,使其不能正常顯示。 1 <div class="btn-group" style="width:100px; ...


關於object標簽,現在已經很少使用了,但在考慮到相容性的問題上,還是會用到object標簽的。

在對object標簽的使用中,會出現播放視頻的 object 標簽遮蓋住其他 div 標簽,使其不能正常顯示。

 1 <div class="btn-group" style="width:100px;height:100px;z-index:2222222">
 2     <ul>
 3         <li>四畫面</li>
 4         <li>九畫面</li>
 5         <li>十六畫面</li>
 6     </ul>
 7     <iframe id="iframe1" src="about:blank" frameBorder="0" marginHeight="0" marginWidth="0" 
style="position:absolute; visibility:inherit; top:0px;left:0px;width:100px;height:100px;z-index:-1; filter:alpha(opacity=0);"></iframe> 10 </div>

解決:div為要顯示的,被object遮蓋,在div中增加一個iframe,通過iframe來遮擋object標簽。

原因:object標簽不在dom文檔流中,瀏覽器在解析的時候會先把object放置在最上層,再依次解析dom文檔,放置在下層,因此有些div標簽會被object標簽遮蓋,此時設置z-index是無效的。由於iframe標簽級別高於object標簽,故可利用在div中加入iframe來解決此類問題。

註意:1、div必須設有特定的z-index並且大於iframe的z-index;

   2、iframe的z-index必須為負,否則,div無法遮蓋iframe;

   3、iframe的top和left為0,且iframe的寬、高與div的寬高相等剛好完全覆蓋;

   4、註意設置iframe的透明度為0;

   5、iframe作為顯示div的子元素添加在內。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、這一節講解的是背景圖片開始的位置也是可以設置的: background-orgin:數值值; 這裡的屬性值就是開始的位置,可分為: padding-left(預設);content-box;border-box <style> *{ margin:0; padding;0; } ul li{ l ...
  • 指令是以數據去驅動DOM行為,簡化DOM操作。常用指令如下 v-text innertext,不能解析文本中的html標簽 v-html innerhtml,可解析文本中的html標簽 v-show 控制元素的顯示、隱藏 v-if、v-else-if、v-else 滿足條件才顯示對應的元素 v-fo ...
  • 接上篇 https://www.cnblogs.com/chenyingying0/p/12608666.html 為什麼導航不使用fixed定位: 首先解釋下,手機端的頭部導航和底部導航,位置一般都是固定不變的 但是我們這裡不使用固定定位fixed,因為它在手機端的相容性並不好 我們可以設置總容器 ...
  • vue是國人開發的一個js框架,國人用得比較多。 Vue等框架與jQuery的區別 jQuery基於dom操作 Vue框架以數據驅動、組件化開發為核心 下載vue.js 如果安裝了node,執行命令 npm install vue 下載vue.js,可在vue後面加上 @版本號 指定要下載的vue. ...
  • 一、HTML 媒體(Media) 1.1HTML 多媒體 Web 上的多媒體指的是音效、音樂、視頻和動畫。 現代網路瀏覽器已支持很多多媒體格式。 1.2什麼是多媒體? 多媒體來自多種不同的格式。它可以是您聽到或看到的任何內容,文字、圖片、音樂、音效、錄音、電影、動畫等等。 在網際網路上,您會經常發現嵌 ...
  • 什麼是 XHTML?XHTML 是以 XML 格式編寫的 HTML。 XHTML 指的是可擴展超文本標記語言 XHTML 與 HTML 4.01 幾乎是相同的 XHTML 是更嚴格更純凈的 HTML 版本 XHTML 是以 XML 應用的方式定義的 HTML XHTML 是 2001 年 1 月發佈 ...
  • 首先保證這些條件滿足: 然後全局安裝vue cnpm install -g vue-cli 安裝完成後可以使用vue -h查看vue的幫助文檔 vue -list 查看vue支持的模板 我們接下來會用到的是webpack vue init webpack mall 項目名輸入必須是英文,我這裡輸入m ...
  • HTML URL代表HTML 統一資源定位器(Uniform Resource Locators),URL是一個網頁地址,URL可以由字母組成,如"W3CSchools.cc",或互聯網協議(IP)地址: 192.68.20.50;大多數人進入網站使用網站功能變數名稱來訪問,因為 名字比數字更容易記住。 U ...
一周排行
    -Advertisement-
    Play Games
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊,後續可能不再更新Garne ...
  • C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了,幾乎是無縫銜接,很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高,我只要會調用方法就行。這個系統交付之後不會有太多問題,更多應該是做小需求,有大的開發任務應該也是第二期的事,嗯?怎麼感覺我變成運維了?而 ...
  • 我在隨筆《EAV模型(實體-屬性-值)的設計和低代碼的處理方案(1)》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼(或者說無代碼)的一些實現思路,在本篇隨筆中,我們來分析一下這種針對通用業務,且只需定義就能構建業務模塊存儲和界面的解決方案,其中的數據查詢處理的操作。 ...
  • 對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1,這將啟用NTP伺服器功 ...
  • title: Django信號與擴展:深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分:Django信號基礎 Djan ...
  • 使用xadmin2遇到的問題&解決 環境配置: 使用的模塊版本: 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 今天我打算整點兒不一樣的內容,通過之前學習的TransformerMap和LazyMap鏈,想搞點不一樣的,所以我關註了另外一條鏈DefaultedMap鏈,主要調用鏈為: 調用鏈詳細描述: ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 後端應用級開發者該如何擁抱 AI GC?就是在這樣的一個大的浪潮下,我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型,跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好,或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • @Autowired是Spring框架提供的註解,@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配,而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean,而@Resourc... ...