您的位置:海南科技网首页 > 建站经验 > 正文

实现某个div置顶层在最前面的方法

2017-06-06 14:21:52 来源:海南科技网 繁体中文 关闭 收藏 打印 复制

<style>
.tanchuang{position:absolute;z-index:999;}
.dashang{position:absoulte;z-index:5555;  font-size:14px; padding:0; margin:0; height:31px; line-height:31px; background: url(http://www.qzhxw.com/skin/dashang/titbg.gif) center top repeat-x #CBE4EF;}
.dashang b{ float:left; margin-left:15px;}
.dashang a{ float:right; margin-right:5px; margin-top:6px; display:inline;}
a.cls{height:18px; width:18px;display:block; overflow:hidden; line-height:200px;}
.nr{padding:10px; text-align:left;}
a.cls,a.cls:link,a.cls:visited{background:url(http://www.qzhxw.com/skin/dashang/cls.gif) center 0 no-repeat;}
a.cls:hover{background:url(http://www.qzhxw.com/skin/dashang/cls.gif) center -20px no-repeat;}
.box{ border:1px #999999 solid; background:#FFF;}
/*圆角边框*/
.lt,.rt,.lb,.rb{ background-image:url(http://www.qzhxw.com/skin/dashang/abg.png);filter:alpha(opacity=10);-moz-opacity:.1;opacity:.1;line-height:0;}
.lt,.rt,.lb,.rb{ height:6px;width:6px;}.t,.b,.l,.r{ background:#000000;filter:alpha(opacity=10);-moz-opacity:.1;opacity:.1;line-height:0;}
.l,.r{width:6px;}.t,.b{height:6px;}.lt{ background-position:0 0;}.rt{ background-position:right 0;}.lb{ background-position:0 bottom;}.rb{ background-position:right bottom;}
/*小三角*/
s{position:absolute;top:-13px;*top:-13px;left:50px;display:block;height:0;width:0;font-size:0; line-height: 0;border-color:transparent transparent #666 transparent;border-style:dashed dashed solid dashed;border-width:10px;}
i{position:absolute;top:-9px;*top:-9px;left:-10px;display:block;height:0;width:0;font-size: 0;border-width:10px;
line-height: 0;border-color:transparent transparent #FFF transparent;border-style:dashed dashed solid dashed;}
.open{position:relative; width:80px; height:25px;line-height:210%; border:1px solid #888888; background:#E94643;margin:0% auto 0 280px; text-align:center;}
.open span{font-weight:bold;cursor:pointer; display:block; width:100%; color:#FFF}
.odiv{ position:absolute; top:29px; left:-1px; width:420px;}
</style>
<script type="text/javascript">
function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){
var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;
var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;
var openTip = oOpenTip || "";
var shutTip = oShutTip || "";
if(targetObj.style.display!="none"){
   if(shutAble) return;
   targetObj.style.display="none";
   if(openTip  &&  shutTip){
    sourceObj.innerHTML = shutTip;
   }
} else {
   targetObj.style.display="block";
   if(openTip  &&  shutTip){
    sourceObj.innerHTML = openTip;
   }
}
}
</script>
<div class="tanchuang">
<div class="open"><span onclick="openShutManager(this,'box',false,'关闭打赏','弹出打赏')">我要打赏</span>
<div class="odiv" id="box" style="display:none"><table border="0" cellpadding="0" cellspacing="0">
  <tr><td class="lt"></td><td class="t"></td><td class="rt"></td></tr><tr><td class="l"></td><td class="box">
 <h3 class="dashang"><b>我要打赏</b><a class="cls" href="javascript:;" onclick="openShutManager(this,'box',false)" title="关闭">关闭</a></h3>
 <div class="nr">
      <img src="http://www.qzhxw.com/skin/dashang/weixin.gif" />
      温馨提醒:喜欢亲就打赏一下吧,非常感谢您对本站的支持!
   </div>
   </td><td class="r"></td></tr><tr><td class="lb"></td><td class="b"></td><td class="rb"></td></tr></table><s><i></i></s>
   </div>
</div>
</div>

以上置顶的控制代码:.tanchuang{position:absolute;z-index:999;}

  (来源:海南科技网)

相关资讯:

版权声明:
1.本站登载此文仅出于传递更多信息,并不意味着赞同其观点或证实其描述,不承担侵权行为的连带责任。
2.如本网信息涉及版权等问题,请于发布起15个工作日内发送邮件与本网联系,我们将及时删除处理。