div
{
position:absolute
left:0px
top:0px
z-index:-1
}
定义和用法
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute）！
转载自http://www.w3school.com.cn/cssref/pr_pos_z-index.asp
其实这是我在某次面试前端实习生时候遇到的一个问题，面试官说你有多少种让DOM隐藏的方法，能说多少说多少，当时脑抽，因为是“能说多少说多少”就觉得那肯定有好多，总结一下当时想出来的“偏方”。
两者不同：如果设置 display:none，将隐藏整个元素，如果设置 visibility:hidden，元素的内容将不可见，但元素仍保持原来的位置和大小。
思来想去既然是隐藏，我是不是还可以说 opacity:0，问了一下这个答案行不行，他说行，还有吗？
当然有：
设置position为position:absolute或fixed，可以通过z-index遮掩。
设置父元素为 overflow:hidden ，将想要隐藏的元素移出父元素范围。
通过css的clip属性，将DOM裁剪。
通过css的transform属性
a. transform: skew(90deg) 拉伸90度，当然不一定是90
b. transform: scale(0) 缩放到0
c. transform: rotateX(90deg) 当然角度不一定是90，也不一定是沿x轴
＝。＝面试完之后我就去群里边问了一下，大部分人说的答案都是 display: none和 visibility: hidden斗胆猜测一下这两个应该是面试官想要的答案。
虽然答案可能就这两个，但是我还是有用到过我的“偏方”去做隐藏元素，
我遇到的情况是，我需要为DOM元素做一个fadeout＋fadein的动画，元素带有click事件，fadeout之后只是opacity为0，然后就有了 元素隐藏了之后点击事件还存在 这个bug。
当然解决方案有很多，可以通过js，也可以通过css，css可以通过延时＋transform来做，也算是我的偏方吧，可能解决方案并不完美，望留言指教。
当然这只是一些自己瞎琢磨出来的方法，希望有和我一样爱闹腾的同学补充一下下,也希望大神见到后不吝指教，感激不尽。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{display: blockwidth: 200pxheight: 200pxposition: relative}
img{width: 200pxheight: 200px}
div{background: #111111z-index: 999width: 200pxheight: 200pxposition: absolutetop: 8pxopacity: 0}
</style>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("div").hover(function(){
$("div").css("opacity","0.2")
$("img").css("opacity","0.65")
},function(){
$("div").css("opacity","0")
$("img").css("opacity","1")
})
})
</script>
</head>
<body>
<a href=""><img src="../img/1.jpg"/></a><div></div>
自己换一张图片，导入jQuery.min的开发库
</body>
</html>
