求教。为什么点击图片后会往下移动位置。

Question

    <div class="picture">
        <ul>
            <li class="picture-1"><img src="img/logo.a.png"  id="P_1" onclick="fnImg(this,'P_2')">
             <img id="P_2" style="display:none;" src="img/logo.js.png" onclick="fnImg(this,'P_1')" />
               </li>
            <li class="picture-2"><img src="img/logo.b.png"  id="P_3" onclick="fnImg(this,'P_4')">
             <img id="P_4" style="display:none;" src="img/logo.rc.png" onclick="fnImg(this,'P_3')" />
            </li>
            <li class="picture-3"><img src="img/logo.d.png"  id="P_5" onclick="fnImg(this,'P_6')">
             <img id="P_6" style="display:none;" src="img/logo.rj.png" onclick="fnImg(this,'P_5')" />
            </li>
             <li class="picture-4"><img src="img/more.png" />
            </li>
             <li class="picture-5"><img src="img/logo.e.png"  id="i_1" onclick="fnImg(this,'i_2')">
             <img id="i_2" style="display:none;" src="img/logo.dsj.png" onclick="fnImg(this,'i_1')" />
            </li>
            <li class="picture-6"><img src="img/logo.f.png"  id="i_3" onclick="fnImg(this,'i_4')">
             <img id="i_4" style="display:none;" src="img/logo.zx.png" onclick="fnImg(this,'i_3')" />
             <li class="picture-7"><img src="img/logo.c.png"  id="i_5" onclick="fnImg(this,'i_6')">
             <img id="i_6" style="display:none;" src="img/logo.yjs.png" onclick="fnImg(this,'i_5')" />
            </li>

            </li>
        </ul><!-- / -->
    </div>
    <script>
function fnImg(pic,ture){
pic.style.display = 'none';
document.getElementById(ture).style.display = 'block';
}
</script>

css

#Solution .picture{
position: relative;
margin: 0 auto;
}
#Solution .picture-1{
top: 96px;
left: 230px;
position: absolute;
}

#Solution .picture-2{
top:210px;
left: 370px;
position: absolute;
}
#Solution .picture-3{
top:96px;
left: 485px;
position: absolute;
}
#Solution .picture-4{
top:230px;
left: 630px;
position: absolute;
}
#Solution .picture-5{
top:96px;
left: 760px;
position: absolute;
}
#Solution .picture-6{
top:210px;
left: 890px;
position: absolute;
}
#Solution .picture-7{
top:96px;
left: 1010px;
position: absolute;
}

点击一个图片显示另一个图片，但是另外一个图片老是往下移动一点

Answer 1

这里，用JavaScript封装了一个函数，并且在所有列表和图片中进行了事件绑定（onclick="fnImg(this,'P_5')..），这个事件是点击事件，意思是，当鼠标点击时执行fnImg这个函数，并且在（）,中传入了两个参数，供函数调用。对应下面的CSS样式，所有的CSS样式里都有绝对定位属性，改变它的top值还是left值都可以使图片移动。