（1）display:設置屬性display:none；,該元素被隱藏，而且該元素的子孫後代也被同時隱藏，此時被隱藏的元素不占據任何空間，用戶的交互操作在此元素上不能生效，但是通過js語句操作dom可以來操作該隱藏元素。
實例：
.display-hide {
display: none;
transition: all ease 0.8s;
}
.display-hide:hover { /* 當鼠標懸浮在該元素時，設置為block,此時元素也不會出現 ，因為被display隱藏的元素，不占據任何空間，用戶的交互操作也不能生效*/
display: block;
}
.display-hide p {/* 同樣的隱藏元素的子孫後代元素也會被隱藏，即使後代元素屬性設置為block */
display: block;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>鼠標移近來，然後在點擊有驚喜哦</div>
<div class="display-hide"><p>0</p></div>
<div>第三個div塊</div>
<script>
var count = 0;
var DHide = document.getElementsByClassName('display-hide');
var Div = document.getElementsByTagName('div');
Div[0].addEventListener("mouseover", function(){
count++;
DHide[0].innerHTML = '<p>' +'你的鼠標移近第一個div：'+ count + '次'+'</p>';
});
Div[0].addEventListener("click", function(){
DHide[0].style.display = "block";
});
</script>
</body>效果圖：
此例子中，第二個div元素被隱藏，於此同時它的子元素p也被隱藏了，當用戶有對第二個div有交互行為，此時是不起作用的，但通過js語句可以來操作該元素，使開元素顯示。
（2）opacity:設置屬性opacity:0；，只是從視覺的角度隱藏了該元素，而該元素本身還是占據頁面中的布局，而且，這種隱藏會響應用戶的交互。
實例：
<style>
div {
padding: 60px;
width: 60px;
font-size: 14px;
background: pink;
text-align: center;
margin: 1%;
float: left;
cursor: pointer;
}
/* 該元素雖然被隱藏了，看不見了，但它在頁面中的位置還是存在的 */
.opacity-hide {
opacity: 0;
transition: all ease 0.8s;
}
/* 當鼠標移動到這個隱藏元素上面，元素顯示，此時響應了用戶的交互行為 */
.opacity-hide:hover {
opacity: 1;
}
</style>
</head>
<body>
<div>1</div>
<div class="opacity-hide">2</div>
<div>3</div>
</body>效果圖：
此例中第二個div被隱藏了，我們看不見了，但是它在頁面中的位置還是存在著，對用戶的操作還是會做響應的，當鼠標滑動到第二塊div時，顯示。
（3）visibility：設置屬性visibility:hidden;,該元素被隱藏，同樣隱藏的元素對頁面的布局仍起作用，但它不會影響任何用戶交互，而且它的子孫元素也會在設置為visibility：visible。
.visibility-hide {
visibility: hidden;
transition: all ease 0.8s;
}
/* 雖然設置了隱藏效果，但是不會影響用戶的交互操作 */
.visibility-hide:hover {
visibility: visible;
}
/* 父元素被隱藏了，這時設置子元素為顯示狀態，此時子元素顯示，但父元素不會顯示 */
.visibility-hide p {
visibility: visible;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>1</div>
<div class="visibility-hide"><p id="visi-p">2</p></div>
<div>3</div>
<script>
var oHide = document.getElementsByClassName('visibility-hide');
var oHideP = document.getElementById('visi-p');
var count = oHideP.innerHTML;
oHide[0].addEventListener("click", function(){
count++;
oHideP.innerHTML = count;
});
</script>
</body>效果圖：
此例中，當鼠標移近第二個div時，div的visibility屬性變為visible,並為之綁定點擊事件。
（4）Position：posiition:absolute;
top:-2880px;
Left:-2880px;
通過設置top,left的值，將元素放在屏幕的可視區域外，這樣就達到了元素隱藏的效果。
.position-hide {
position: absolute;
top: -9999px;
left: -9999px;
}
input{
position: absolute;
top:-2880px;
left:-2880px;
}
/* 這個用戶效果不會起作用，因為此時的div不在可視區內 */
.position-hide:hover {
position: static;
}
</style>
</head>
<body>
<div>點擊元素，有驚喜</div>
<div class="position-hide"><p>0</p></div>
<div><input type="radio" value = "獲得焦點">3</div>
<script>
var count = 0;
var oHide = document.getElementsByClassName('position-hide');
var Div = document.getElementsByTagName('div');
var input = document.getElementsByTagName('input');
Div[0].addEventListener("mouseover", function(){
count++;
oHide[0].innerHTML = '<p>' +'你的鼠標移近第一個div：'+ count + '次'+'</p>';
});
Div[2].addEventListener("click",function(){
input[0].style.position = "static";
});
Div[0].addEventListener("click", function(){
oHide[0].style.position = "static";
});
</script>
</body>效果圖：
總結： display,opacity,visibility,position，這四種元素隱藏元素各有優缺點，在實際的使用中根據需要，選擇合適的。
本文出自 “夢想需要堅持” 博客，請務必保留此出處http://xiyin001.blog.51cto.com/9831864/1793123
Tags: transition function position display 效果圖
文章來源：