1.display:none; (common)
Disappear in real sense, after setting does not occupy space position, and child tags are not displayed
2.visililety:hidden; (common)
Display: None will only cause the browser to redraw, not rearrange, but will not interact with the user
3.opacity:0;
It’s just visually hidden, still in place and able to interact with the user
4.position;
You can set the left and right properties of position to move it off the screen