javascript - click和onmouseoverr设置zIndex无法生效，百思不得其解，有代码，求大神。

Question

目标：想要实现的效果，鼠标移动过来，让当前img的z-index最大，现在用一个来测试。
出现问题：设置好函数，移动上去没反应，对比代码并无错误之处。
尝试办法：
1、使用click和onmouseover，一起来测试
2、使用onmouseover，此时console.log都打印不出来，z-index无法生效
3、使用onclick，可以打印出console.log，但z-index无效
代码如下：
1,用来测试的两个img

<img  id="fangyibo"  src="./images/fangyibo.png" style=" " onclick="fang()">
<img  id="liyanqiu"  src="./images/liyanqiu.png ">

2，它俩的css

.teachers  #fangyibo {
    position: relative;
    display: block;
    z-index: 1;
    float: left;   
}
.teachers #liyanqiu {
    position: relative;
    display: block;
    z-index: 4;
    float: left; 
    margin-left: -68px;
}

3，设置的函数

window.onload = function() {
    var fangYi = document.getElementById("fangyibo");
    fangYi.onmouseover = function() {
        console.log (11);
        document.getElementById("fangyibo").style.zIndex = 10;
    }
}

function fang() {    
    console.log ("11");
    document.getElementById("fangyibo").style.zIndex = 100;
}

Answer 1

首先你css写的就有问题，用了定位就没必要在用display和float，用了定位就已经转成块级元素了。
js的fang函数应该放在window.onload函数体内，不然的话dangyibo这个id是找不到的。