如何让一个层位于iframe之上.flash之上

蓝色理想 goos

摘录一段CSS参考手册的话:

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释:元素可拥有负的 z-index 属性值。

注释:z-index 仅能在定位元素上奏效(例如 position:absolute;)!

说明:该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

那么,问题迎刃而解,如果需要一个层位于一个BT的层之上,那么这两个层都需要必备两个基本的属性:

1. 定位

2. z-index

例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>position</title>

<style type="text/css">

*{font:normal 12px/120% Tahoma;}

html{ border:0;}

body{ background:#000; overflow:auto;}

#t-iframe{ background:#fff; position:relative; z-index:1;}

.box{ position:relative; background:#f7f7f7; border:solid 1px #f09; width:200px; height:200px;}

pre{ margin:0; padding:8px; color:#f09; line-height:160%;}

</style>

</head>

<body>

<div class="box" style="z-index:5; top:50px;">

<pre>

position: relative;

background: #f7f7f7;

border: solid 1px #f09;

width: 200px;

height: 200px;

z-index: 4;

top: 50px;

我在iframe上

</pre>

</div>

<iframe id="t-iframe" scrolling="no" frameborder="0" height="300" width="100%" src="http://www.caihong.cc"></iframe>

<div style="position:relative; z-index:3;">

<embed height="288" width="352" wmode="opaque" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" quality="autohigh" src="http://www.caihong.cc/msc/fm365.swf"/>

</div>

<div class="box" style="z-index:6; top:-80px;">

<pre>

position: relative;

background: #f7f7f7;

border: solid 1px #f09;

width: 200px;

height: 200px;

z-index:6;

top:-80px;

我在FLASH上

</pre>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端黑板报

“节流函数”提高性能

浏览器中DOM操作比起非DOM交互需要更多的内存和CUP时间,连续的DOM操作有可能会导致浏览器挂起,甚至崩溃。尤其IE中的onresize事件。 高频率的更改...

1738
来自专栏老马寒门IT

03Vue.js快速入门-Vue列表渲染及条件渲染实战

有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作。最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据。如果有数据就显示表格数据。 Vue...

20510
来自专栏互联网杂技

编码规范

不要在自闭合(self-closing)元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。 不要省略可选的结束标签(closing tag)(例如...

3227
来自专栏java一日一条

Jsoup代码解读之六-parser(下)

读Jsoup源码并非无聊,目的其实是为了将webmagic做的更好一点,毕竟parser也是爬虫的重要组成部分之一。读了代码后,收获也不少,对HTML的知识也更...

562
来自专栏LanceToBigData

SpringBoot(四)之thymeleaf的使用

这篇文章将更加全面详细的介绍thymeleaf的使用。thymeleaf 是新一代的模板引擎,在spring4.0中推荐使用thymeleaf来做前端模版引擎。...

36910
来自专栏一个会写诗的程序员的博客

前端知识体系整理(不断更新)

var x = {}; var y = []; var z = null; typeof x; // "object" typeof y; // "objec...

722
来自专栏LanceToBigData

Vue之初识Vue

如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维, 因为Vue.js是数据驱动的,你无需手动操作DOM。它通过一些...

671
来自专栏极客编程

AngularJS应用开发思维之1:声明式界面

这篇博客之前承接上一篇:http://www.cnblogs.com/xuema/p/4335180.html

631
来自专栏進无尽的文章

编码篇 — 一个DataModel小例领略指针的魅力

做过的项目中曾经有这样的需求:货品录入(商品入库),弹框弹出所有的货品(很多),选择其中的一个,则下次弹框弹出所有货品时不再显示选择了的那件货品。当然,录入功能...

633
来自专栏互联网杂技

js事件

1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body...

33211

扫码关注云+社区