zoukankan      html  css  js  c++  java
  • 使用zindex属性让控件显示在最上层

    设置示例:

    <div id="a1" style="position:absolute;left:100px;top:100px;100px;height:100px;
    background-color:#ddeeff;z-index:1"></div>
    <div id="a2" style="position:absolute;left:150px;top:130px;100px;height:100px;
    background-color:#eeffdd;z-index:2"></div>
    <div id="a3" style="position:absolute;left:200px;top:160px;100px;height:100px;
    background-color:#ffddee;z-index:3"></div>

    DEMO:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    <script type="text/javascript">
    function $(obj){
    return document.getElementById(obj);
    }
    function change(n){
    for (var i=1;i<4;i++){
    if(n==i){
    $("a"+i).style.zIndex="100";
    }else{
    $("a"+i).style.zIndex="0";
    }
    }
    }
    </script>
    </head>
    <body>
    <div id="a1" style="position:absolute;left:100px;top:100px;100px;height:100px;
    background-color:#ddeeff;z-index:1" onclick="change('1')" ></div>
    <div id="a2" style="position:absolute;left:150px;top:130px;100px;height:100px;
    background-color:#eeffdd;z-index:2" onclick="change('2')"></div>
    <div id="a3" style="position:absolute;left:200px;top:160px;100px;height:100px;
    background-color:#ffddee;z-index:3" onclick="change('3')"></div>
    </body>
    </html>
    原文链接:http://hi.baidu.com/j_z_/blog/item/458dd81b98821dd0ac6e756a.html
  • 相关阅读:
    Pika的设计及实现
    高性能网络编程
    C语言的结构体
    消息队列库——ZeroMQ
    Diffie-Hellman密钥交换算法
    mysql-proxy 读写分离
    位运算
    分布式学习之一:事务
    Redis Cluster
    SpringBoot整合ActiveMQ,看这篇就够了
  • 原文地址:https://www.cnblogs.com/dupeng0811/p/2045386.html
Copyright © 2011-2022 走看看