web front-end entry to the combat: CSS method to hide elements and differences

1.opacity

opacity: 0 the element itself and its child elements are set to invisible, and the element itself is still occupying its own position layout work and web pages, it will respond to user interaction.

2.visibility　

visibility: hidden the element itself and its child elements are set to invisible, and the element itself is still occupying its own position layout work and web pages, it will not respond to user interaction. If you want the child element is displayed, set the child elements of visibility: visibility;

3.display

display: none to use this property, hidden elements on the page layout does not work. Not only that, once the display is set to none of the elements of any direct user interaction can not take effect. In addition, screen reading software does not read the content of the element. Effect generated in this way as an element completely absent. Still have access to the element through DOM. So you can operate it through the DOM.

4.position

position: absolute top and left to set to a sufficiently large negative number, corresponding to the visible area into the outer element, it does not affect the layout, allowing the element remains operable, it may be identified on a screen reader.

in conclusion:

opacity, visibility affect the layout, the former does not affect the interaction, which affect the interaction;
Run the display does not affect the layout, affect the interaction;
position does not affect the layout does not affect the interaction;

Examples are given below: free to debug

学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）
<!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 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.οnclick=function () {
        alert("div2");
    };
    div2.οnclick=function () {
        alert("div2");
    };
    div3.οnclick=function () {
        alert("div3");
    };
    div4.οnclick=function () {
        alert("div4");
    };
</script>

</body>
</html>

The z-index hidden by

<style>
div{    
     z-index:-9999;
}
</style>

web front-end entry to the combat: CSS method to hide elements and differences

Guess you like