Getting started with the web front end to the actual combat: the method and difference of hidden elements in CSS

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

5. Hiding through z-index

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

Tags: Web Development Attribute

Posted on Thu, 19 Dec 2019 10:22:55 -0500 by xisle