1.opacity
opacity:0將元素本身及其子元素都置為不可見的，而元素本身依然占據它自己的位置並對網頁的布局起作用，它會響應用戶交互
2 .visibility
visibility:hidden將元素本身及其子元素都置為不可見的, 而元素本身依然占據它自己的位置並對網頁的布局起作用，它不會響應用戶交互.如果想讓子元素顯示，則設置子元素的visibility：visible;
3.display
display:none使用這個屬性，被隱藏的元素對網頁的布局不起作用。不僅如此，一旦display設為none任何對該元素直接的用戶交互操作都不可能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在。通過DOM依然可以訪問到這個元素。因此你可以通過DOM來操作它。
4.position
position:absolute 將top和left設置成足夠大的負數，相當於把元素放到可視區域外，它不會影響布局，能夠讓元素保持可操作性，在讀屏軟件上可以被識別。
總結一下：opacity,visibility影響布局，前者不影響交互，后者影響交互；
display不影響布局，影響交互；
position 不影響布局，不影響交互；
下面給出例子：可以自行調試
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1 { width: 200px; height: 200px; background-color: #B4B4B4; } .div2 { width: 200px; height: 200px; background-color: goldenrod; } .div2-2 { width: 100px; height: 100px; background-color: lightsalmon; } .div3{ width: 200px; height: 200px; background-color: green; } .div4 { width: 200px; height: 200px; background-color: greenyellow;} </style> </head> <body> <div class="div1">1</div> <div class="div2">2<div class="div2-2">2-2</div></div> <div class="div3">3</div> <div class="div4">4</div> <script> var div1 = document.querySelector(".div1"); var div2 = document.querySelector(".div2"); var div3 = document.querySelector(".div3"); var div4 = document.querySelector(".div4"); div1.onclick=function () { alert("div2"); }; div2.onclick=function () { alert("div2"); }; div3.onclick=function () { alert("div3"); }; div4.onclick=function () { alert("div4"); }; </script> </body> </html>
————————————————
版權聲明：本文為CSDN博主「Alisane」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/wsymcxy/article/details/82735743