Web_Dev_Grad

Visibility is a parameter that you can set in CSS to make an element invisible on the page, hiding the content but making it still take up space on the page.
visability: hidden;
This differs from
display: hidden;
which removes the element entirely from the page.

Z-Positioning is how the browser handles what elements appear in front of others. It is very similar to moving around clipart or shapes in Microsoft Word using the bring-to-front or send-to-back transformations. These are set using the z-index parameter with a number for the value. The higher number, the more “on-top” it is. So with two elements taking up the same space, the user will only see the one with the higher z-index value.

A great use case for this is a modal, which is a pop up box that appears on the screen. You may want the background to dimmed slightly and not clickable by the user until the modal has been dealt with, either by confirming or logging in, etc. To achieve this you can have a black div element that takes up 100% of the height and width of the webpage with a opacity of 0.5 so that it is slightly see through. This would make everything behind it appear darker. Give it a high z-index value of, say, 900 so that it is always on top of the background things. Then give your modal a z-index value of 901 or greater so that it always on top of this black div.