CSS hidden element method and the difference

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. It 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.

To summarize: opacity, visibility affect the layout, the former does not affect the interaction, which affect the interaction;

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

<!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>

Original link: https: //blog.csdn.net/wsymcxy/article/details/82735743

The z-index hidden by

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

Link: http: //www.imooc.com/article/76214
Source: Mu class network

CSS hidden element method and the difference

Guess you like