首頁(yè) 猿問(wèn) div的替換,用了z-index，...

div的替換,用了z-index，為什么不成功，幫忙看一下？

JavaScript

人到中年有點(diǎn)甜 2018-10-11 14:11:34

<div id="example1" class="divcss5-1"></div> <div id="example2" class="divcss5-2></div><script type="text/css"> .divcss5-1{width:100%;height:20%;margin-left: 40px;margin-top: 10px;z-index:1;} .divcss5-2{width:100%;height:20%;margin-left: 40px;margin-top: 10px;z-index:2;} </script>

查看完整描述

1 回答

慕雪6442864

TA貢獻(xiàn)1812條經(jīng)驗(yàn) 獲得超5個(gè)贊

第一種方法：

<div id="example1" class="divcss5-1">1</div>
 <div id="example2" class="divcss5-2">2</div>

<style type="text/css">
    .divcss5-1{position:absolute;top:10px;left:40px;width:100%;height:20%;background-color:#ccc;z-index:1;}    
    .divcss5-2{position:absolute;top:10px;left:40px;width:100%;height:20%;background-color:#eee;z-index:2;}</style>

第二種方法，用的js，點(diǎn)擊div2后可以讓1覆蓋2：

<div id="example1" class="divcss5-1">1</div>
<div id="example2" class="divcss5-2" onclick="aa()">2</div>

<style type="text/css">
    .divcss5-1{position:absolute;top:10px;left:40px;width:100%;height:20%;background-color:#ccc;visibility:none;}    
    .divcss5-2{position:absolute;top:10px;left:40px;width:100%;height:20%;background-color:#eee;}</style><script type="text/javascript">
    function aa(){
        alert("從1隱藏2顯示到2隱藏1顯示");        var a1=document.getElementById("example1");       
         var a2=document.getElementById("example2");
        a1.style.visibility="visible";
        a2.style.visibility="hidden";
    }</script>

反對(duì) 回復(fù) 2018-11-08