为什么z-index在众多标签中失效
無論是 CSS 下拉式目錄,或是 Javascript 製作出來的彈出式清單,一旦遇到 Flash 時,就被 Flash 遮蓋住,這個問題困擾了不少設計人員,原則上有兩種解決方法,一種是在圖層中使用 IFRAME,另一種則是改變 Flash 嵌入方式。
這裡要聊的,是第二種方法,先來看看問題狀況:
|
|
|
左邊的彈出選單被 Flash 蓋住了,而右邊的彈出選單,則沒有這種情況,這兩個例子的彈出選單都是使用 CSS 製作。
先講解決方法,左邊的 Flash 使用 <object> 嵌入頁面中,<object> 物件在 HTML 規格中,還算妾身未明的物件,造成的最大問題是控制上的問題,比如這個例子,就算你把 Flash 放到圖層中,再加上 z-index 照樣把彈出選單蓋住。那怎麼辦呢?改右邊的方法,以swfobject方式嵌入,語法為:
<script type="text/javascript" src="data:images/swfobject.js"></script> |
步驟是先連結 swfobject.js 這個檔案,檔案的官方下載位置是:
swfobject_1.4.zip(40K)
壓縮檔中檔案很多,是範例及說明,要用到的只有 swfobject.js一個檔案。
然後宣告一個放置 flash 的區塊,這個例子的識別名稱為 flashcontent,接下來,建立 FlashObject 物件,語法是:
var fo=new FlashObject(swf檔,識別元,寬度,高度,Flash版本,背景色); |
如果需要加其他屬性,例如透明,則使用 fo.addParam 加入,語法為:
fo.addParam("wmode", "transparent"); |
最後,把物件寫到 flashcontent 區塊中,語法為:
fo.write("flashcontent"); |
如此就完成了,原文刊載於:
http://www.adobe.com/devnet/flash/articles/swfobject.html
什麼情況造成的?
原因和網頁元件的特性有關,如果要把網頁元件分類,其中有一種分類法為:可定位(Positional)和不可定位(non- Positional),什麼意思呢?網頁中呈現的元件,例如段落、表格等,是由 HTML 創建出來的,但部份我們熟知的元件,例如表單,卻不是由 HTML 創建出來,而是作業系統本身建立,HTML 只不過是叫過來用(call),類似的元件還有 Java Applet、ActiveX、Flash 和一些 plug-in等。
講白一點,HTML 是一個二維空間,只上下左右的概念,有了 CSS 之後,開始有三度空間的概念,但,前述提到的這些元件,既非擺在二維空間裡,也不是擺在三度空間中,到底擺那?天知道!所以 z-index 失效,基本上,這應屬於瀏覽器的問題,這裡有一篇專文論述:
http://www.webreference.com/dhtml/diner/seethru/index.html
同樣的情況,還常見於下拉表單突破彈出選單,但這個問題,瀏覽器本身已經解決了,像 FireFox 上就不會發生,至於 IE,我就沒空想知道他們改正沒。
這算是個老問題了,199X 年時就被廣泛討論,最主要是用 Javascript 製作的動態下拉功能表被表單中的下拉清單穿透造成的,當時急壞了一些人,後來發現,用 IFRAME 這個不可定位元件來以毒攻毒可以解決這問題,原理就是把 IFRAME 放到圖層中,如此一來,管你底下是表單的下拉清單還是 Flash,一律可以蓋過去。作法就有點囉嗦,這裡就不提了。
转载于:https://www.cnblogs.com/janey/archive/2010/03/13/1685143.html
为什么z-index在众多标签中失效相关推荐
- a标签在td标签中失效的解决办法
解决a标签在td标签中失效的办法 当在td标签中使用a标签会发现a标签失效无法点击触发,可以在href中添加此次内容,如下: <a href='javascript:void(0);'>& ...
- 超链接a标签的伪类选择器问题,Link标签与visited标签的失效问题(问题介绍与解决方法)。以下全部内容跟可通过鼠标左键选取后,复制到编辑器中直接运行。
超链接a标签的伪类选择器问题,Link标签与visited标签的失效问题(问题介绍与解决方法).以下全部内容跟可通过鼠标左键选取后,复制到编辑器中直接运行. 参考文章: (1)超链接a标签的伪类选择器 ...
- html的meta总结,html标签中meta属性使用介绍和 动态替换字符串
http://www.haorooms.com/post/html_meta_ds http://www.haorooms.com/archives里面的东西比较多,需要细看一下 http://www ...
- 03_MyBatis基本查询,mapper文件的定义,测试代码的编写,resultMap配置返回值,sql片段配置,select标签标签中的内容介绍,配置使用二级缓存,使用别名的数据类型,条件查询ma
1 PersonTestMapper.xml中的内容如下: <?xmlversion="1.0"encoding="UTF-8"?> < ...
- [html] 当img标签中的src图片加载失败时,怎么让它变得更美观呢?
[html] 当img标签中的src图片加载失败时,怎么让它变得更美观呢? 当默认图也失效,就会陷入死循环,需加变量计数,如果是 vue 的话用 @error.once 更妙.在 onerror 给元 ...
- python提取网页中p标签中的内容_使用Python进行爬虫的初学者指南
前言 爬虫是一种从网站上抓取大量数据的自动化方法.即使是复制和粘贴你喜欢的网站上的引用或行,也是一种web抓取的形式.大多数网站不允许你保存他们网站上的数据供你使用.因此,唯一的选择是手动复制数据,这 ...
- js获取用户在input标签中输入的值,然后改变html下各个标签的值或者属性
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html lang="en"> <head ...
- script标签中的crossorigin属性
在前端监控逐渐完善的今天,页面中错误日志的上报可以说对我们的日常工作带来了极大的帮助. 而使用 window.onerror 事件来捕获 js 脚本中的错误信息是重要的手段 . 但是对于跨域的资源 , ...
- C#正则表达式提取HTML中IMG标签中的SRC地址
百度到的一个,这里就直接贴了 http://blog.csdn.net/smeller/article/details/7108502#comments 一般来说一个 HTML 文档有很多标签,比如& ...
最新文章
- 【原创】单片系统SoC
- SAP FI/CO模块调研问卷
- C#抓取网页程序的实现浅析
- Error: Could not find or load main class org.apache.spark.deploy.yarn.ExecutorLauncher
- Http状态码梳理汇总
- mongodb的安装与简单操作
- Matlab图像标题_title
- springmvc框架使用拦截器实现301永久重定向,其实用过滤器应该是更好
- python游戏引擎-转:十大开源游戏引擎深入比较
- 微信抽奖助手网络或服务器错误,微信抽奖助手怎样运用 抽奖助手运用办法
- ORA-00932:数据类型不一致:应为NUMBER,但却获得CHAR
- 数学建模笔记-斜抛运动建模
- python3 flask 使用Mysql数据库
- 具有舆论属性或社会动员能力的互联网信息服务安全评估报告指南
- Vue进阶(壹佰):当前页面刷新并重载页面数据
- 如何搭建高质量、高效率的前端工程体系--页面结构继承
- AI初创公司新机遇,谷歌苹果竞相收购
- 教你如何使用 python 制作一个简单的密码本
- html div全屏遮罩层,div遮罩层_Jquery全屏遮罩层DIV的实现代码
- 一位微信小程序萌新的学渣笔记(三)基础语法之常见组件