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

相关文章

来自专栏HT

基于HTML5和WebGL的碰撞测试

这是公司大神写的一个放官网上给用户学习的例子,我一开始真的不知道这是在干嘛,就只是将三个形状图元组合在一起,然后可以同时旋转、放大缩小这个三个图形,点击“Ani...

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

Flutter常用widget 'Row、Column'

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

1192
来自专栏用户2442861的专栏

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

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

1002
来自专栏Python攻城狮

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

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

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

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

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

3567
来自专栏hightopo

原 基于 HTML5 WebGL 的 3D

1564
来自专栏hightopo

基于HTML5和WebGL的碰撞测试

1042
来自专栏Linux驱动

26.QT-模型视图之自定义委托

由于模型负责组织数据,而视图负责显示数据,所以当用户想修改显示的数据时,就要通过视图中的委托来完成

842
来自专栏HTML5学堂

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

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

3868
来自专栏王磊的博客

史上最易懂——ReactNative分组列表SectionList使用详情及示例详解

React Native系列 《逻辑性最强的React Native环境搭建与调试》 《ReactNative开发工具有这一篇足矣》 《解决React N...

72414

扫码关注云+社区