虚心请教，谢谢！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>absolute的破坏性</title>
<style>
.box {
padding: 10px;
background-color: #f0f0f0;
}
input {
position: absolute; top: 234px;
width: 160px; height: 32px;
font-size: 100%;
}
</style>
</head>
<body>
<div class="box"><img id="image" src="http://img1.sycdn.imooc.com//54447b06000171a002560191.jpg" width="256" height="191"></div>
<input id="button" type="button" value="图片absolute化">
<script>
var eleImg = document.getElementById("image"), eleBtn = document.getElementById("button");
if (eleImg != null && eleBtn != null) {//为啥要加图像和按钮都不为空的条件，这两对象ID不变，通过ID获得的对象一直都有，难道有为空的情况吗？为空又是什么意思？
eleBtn.onclick = function() {
if (this.absolute) {
eleImg.style.position = "";
this.value = "图片absolute化";
this.absolute = false;//点击后this.absolute只在if条件中判断一次，条件为真就执行这块代码，假就执行else语句。第一次点击按钮时执行到这步，this.absolute = false,必须接着执行else语句才能实现图片absolute化的效果，不就相当于又判断了一次this.absolute吗？总之，图片第一次absolute化得点击两次。/？
} else {
eleImg.style.position = "absolute";
this.value = "图片去absolute";
this.absolute = true;
}
};
}
</script>
</body>
</html>
