前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何让一个层位于iframe之上.flash之上

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

作者头像
练小习
发布2017-12-29 14:45:20
6940
发布2017-12-29 14:45:20
举报
文章被收录于专栏:练小习的专栏练小习的专栏

蓝色理想 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>

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档