1.opacity
opacity: 0 makes the element itself and its children invisible, while the element itself still occupies its own position and plays a role in the layout of the web page, it will respond to user interaction.
2.visibility
Visibility: hidden makes the element itself and its children invisible, while the element itself still occupies its own position and plays a role in the layout of the web page, it will not respond to user interaction. If you want the child element to display, set the visibility of the child element: visibility;
3.display
display:none uses this attribute. Hidden elements have no effect on page layout. Moreover, once display is set to none, any direct user interaction with the element will not take effect. In addition, the screen reading software will not read the content of the element. The effect of this approach is as if the element does not exist at all. This element is still accessible through the DOM. So you can manipulate it through DOM.
4.position
position:absolute sets the top and left to a large enough negative number, which is equivalent to putting the elements outside the visible area. It does not affect the layout, can keep the elements operable, and can be recognized on the screen reading software.
To summarize:
The former does not affect interaction, while the latter affects interaction;
display does not affect layout and interaction;
position does not affect layout and interaction;
Here's an example: you can debug yourself
study Q-q-u-n: 784783012 ，Share learning methods and small details that need attention, and keep updating the latest tutorials and learning methods (From zero foundation to front-end project practice course, learning tools, career planning) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1 { width: 200px; height: 200px; background-color: #B4B4B4; opacity:0; } .div2 { width: 200px; height: 200px; background-color: goldenrod; visibility: hidden; } .div2-2 { width: 100px; height: 100px; background-color: lightsalmon; visibility: visible; } .div3{ width: 200px; height: 200px; background-color: green; display: none; } .div4 { width: 200px; height: 200px; background-color: greenyellow; position: absolute; top:-99em; } </style> </head> <body> <div>1</div> <div>2<div>2-2</div></div> <div>3</div> <div>4</div> <script> var div1 = document.querySelector(".div1"); var div2 = document.querySelector(".div2"); var div3 = document.querySelector(".div3"); var div4 = document.querySelector(".div4"); div1.οnclick=function () { alert("div2"); }; div2.οnclick=function () { alert("div2"); }; div3.οnclick=function () { alert("div3"); }; div4.οnclick=function () { alert("div4"); }; </script> </body> </html>
5. Hiding through z-index
<style> div{ z-index:-9999; } </style>