如何让一个层位于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 条评论
登录 后参与评论

相关文章

来自专栏Python攻城狮

Markdown-认识与使用1.简介2.使用一级标题3.设置Markdown编辑

Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑,Markdo...

721
来自专栏HTML5学堂

如何优化前端页面 / 如何优化网页

HTML5学堂:如何优化前端页面 / 如何优化网页。作为前端开发人员来说,不但要开发出能兼容各大主流浏览器的页面,而且还需要懂得去优化前端页面。本文主要给大家讲...

4248
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2.3 文档对象模型DOM及表单

文档对象模型DOM用途是什么?先从一棵树说起。下面是一棵树,由,根部、枝干、叶构成,通过根部可以访问到任何一个叶节点。

662
来自专栏hightopo

基于HTML5和WebGL的碰撞测试

1202
来自专栏王鹤的专栏

Vue.js 2.0源码解析之前端渲染篇

Vue.js框架是目前比较火的MVVM框架之一,简单易上手的学习曲线,友好的官方文档,配套的构建工具,让Vue.js在2016大放异彩,大有赶超React之势。...

5.4K0
来自专栏用户2442861的专栏

Python-OpenCV 处理图像(三):图像像素点操作

第一种办法就是将一张图片看成一个多维的list,例如对于一张图片im,想要操作第四行第四列的像素点就直接 im[3,3] 就可以获取到这个点的RGB值。

1532
来自专栏PPV课数据科学社区

【学习】Vlookup、Lookup都靠边,Mlookup函数来了

Vlookup是最常用到的查找函数,但它有很大的局限性。比如:只能查找第一个符合条件的值,无法任意位置查找和多条件查找等。于是,兰色用VBA编写了一个功能强大的...

3667
来自专栏salesforce零基础学习

salesforce lightning零基础学习(五) 事件阶段(component events phase)

上一篇介绍了lightning component events的简单介绍。此篇针对上一篇进行深入,主要讲的内容为component event中的阶段(Pha...

830
来自专栏数据小魔方

动态图表5|列表框(offset函数)

今天要跟大家分享的是动态图表5——列表框(offset函数)。 制作思路与前一篇中使用index函数制作思路基本一致,先用列表框制作菜单,然后使用offset函...

3365
来自专栏一直在跳坑然后爬坑

Flutter常用widget 'Row、Column'

用于水平显示子项 A widget that displays its children in a horizontal array. 注:这个控件本身不可...

2162

扫码关注云+社区