The difference between Display, Visibility, Opacity, rgba and z-index: -1 in CSS

We often need to control the hidden, transparent and other properties of some elements on the web page

<style>
    .d1{
      display: none;
    }
    .d2{
      visibility: visible;
    }
    .d3{
      opacity: 0;
    }
  </style>

  <div class="d1" onclick="clickEvent('display: none;')"></div>
  <div class="d2" onclick="clickEvent('visibility: hidden;')"></div>
  <div class="d3" onclick="clickEvent('opacity: 0;')"></div>
  <script type="text/javascript">
    function clickEvent(type){
      alert(type)
    }
  </script>

display: none;

1. DOM structure: The browser will not render elements with display:none; and they do not occupy space.
2. Event monitoring: DOM event monitoring is not possible
3. Performance: Dynamically changing this property will cause reordering, resulting in poor performance
4. Inheritance: Will not be inherited by child elements, because child elements will not be rendered
5. Transition: Transition does not support display

visibility: hidden;

1. DOM structure: the element is hidden, but it will be rendered and will not disappear, occupying space
2. Event monitoring: DOM event monitoring is not possible
3. Performance: Dynamically changing this property will cause redrawing, which results in higher performance
4. Inherited: Will be inherited by child elements, but child elements can be unhidden by setting visibility: visible;
5. transition: visible will be displayed immediately, and hidden can be transitioned

opacity: 0;

1. DOM structure: When transparency is 100%, the element is hidden and occupies space
2. Event monitoring: You can monitor DOM events
3. Performance: Promoted to a composite layer, does not trigger redrawing, and has higher performance
4. Inheritance: Will be inherited by child elements, and child elements cannot be unhidden by opacity: 1;
5. Transition: Both hiding and showing support transition

rgb

1. background: rgba(R, G, B, 0), only the background color is transparent, the element is transparent and still occupies space.
2. background: rgba (R, G, B, 0) will not be inherited by child elements
3. The bound events can still be triggered.
4. transition is valid.

z-index: -1

1. Setting z-index only works when the element's current DOM is out of the document flow (position: absolute).
2. Setting z-index: -1 essentially changes the stacking context of the current DOM, placing the element below other elements to achieve the purpose of being hidden.
3. Partial rearrangement without affecting the layout of other layers
4. The part blocked by other elements cannot respond to events, and cannot be clicked even if the upper element is set with pointer-events:none; (Note: this property will be inherited)

A little experiment

You can try it yourself and play it.

//html
<div class="container">
    <div class="target">
        <p>I am target, and you?</p>
    </div>
</div>


// css
  <style>
      .container{
          margin: 0 auto;
          width: 500px;
          min-height: 30px;
          background-color: skyblue;
      }
      .target{
          width: 200px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          margin: 0 auto;
          background-color: plum;
          color: #fff;
          transition: all linear 1s;
          cursor: pointer;
      }
      .clickBlock{
        display: none;
      }
      .clickVisibility{
          visibility: hidden;
      }
      .clickOpacity{
          opacity: 0;
      }
      .clickRgba{
          background-color: rgba(221, 160, 221, 0);
      }
      .clickZindex{
          z-index: -1;
          position: absolute;
      }
  </style>

// js
    const _target = document.getElementsByClassName("target")[0];
    _target.onclick = (() => {
        let i = 1; // click times return () => {
        // _target.attributes.class.value += " clickBlock";
        // _target.attributes.class.value += " clickVisibility";
        // _target.attributes.class.value += " clickOpacity";
        // _target.attributes.class.value += " clickRgba";
        _target.attributes.class.value += " clickZindex";
        console.log(`${i}th click`);
        i++;
    }})();

This is the end of this article about the differences between Display, Visibility and Opacity in CSS. For more information about CSS controlling hidden content, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!