Talking from hidden elements

Preface

Personal blog: Damonare's personal blog

Speaking of hidden elements I think every front of the ER can say a few, but can say the whole I think is not a lot. Bloggers summed up several methods of hiding elements, summarizing the following table:

	Overflow	opacity	visibility	display	position	Clip ( Clip-path)	z-index
Property value	Hidden	0	Hidden	None	Absolute	Rect ()/inset ()/polygon ()	-1000

Why do we need so many ways to hide elements, and they all seem to achieve the same effect. In fact, each method is actually slightly different, and these differences determine which method to use in certain situations. Let's explore the nuances below. 1. Overflow

. hide{
     Overflow:hidden/* Occupy space, can not click * * 
}

the overflow hidden is used to hide the element overflow part, occupy the space, cannot respond to the Click event. 2.opacity

. hide{
    opacity:0;/* occupies space and can be clicked
on
/}. hide_2{
    -webkit-filter:opacity (0);
    Filter:opacity (0);/* occupy space, you can click */
}

Filter element filter can also use the opacity value to set transparency, but filter is now not compatible, only support the WebKit kernel, here incidentally.

opacity is used to set element transparency, but when set to 0 it is the equivalent of hiding elements. Therefore, the element still exists in its original position and occupies space and can respond to events. If you're going to use the opacity attribute to hide elements in the screen-reading software, unfortunately, you can't do it. The element and all its contents are read by the read-screen software, just like the other elements on the Web page. In other words, the behavior of elements is the same as when they are opaque. 3.visibility

. hide{
    Visibility:hidden/* Occupy space, can not click * *
}

as with the opacity attribute, the hidden elements will still work on our page layout. The only difference with opacity is that it does not respond to any user interaction. In addition, elements can be hidden in the read-screen software 4.display

. hide{
    display:none;/* does not occupy space, can not click * * 
}

The Classic display hidden elements, this is completely hidden elements, do not occupy space, also does not affect the layout, of course, can not respond to events. 5.position

. hide{
    Position:absolute;
    left:-99999px;
    top:-90999px;/* does not occupy space, can not click * *
hide--2{
    position:relative;
    left:-99999px;
    top:-90999px;/* occupy space, can not click * * 
}

Suppose there is an element that you want to interact with, but you don't want it to affect your page layout, there is no suitable attribute to handle this situation (opacity and visibility affect the layout, display does not affect the layout but cannot directly interact with the translator). In this case, you can only consider moving the element out of the viewable area. This approach will not affect the layout, there is the ability to keep the elements can be manipulated. It's not 6.clip/clip-path to adopt this approach

. hide{
    position:absolute;/*fixed*/
    clip:rect (top,right,bottom,left);/* Occupy space, cannot click/ 
}
. hide_ 2 {
  Clip-path:polygon (0px 0px,0px 0px,0px 0px,0px 0px);
}

another way to hide elements is by trimming them. In the past, this can be done by clip properties, but this attribute is discarded (now browsers still support), and a better attribute is called Clip-path. Clip-path properties are really useful drop, you can easily achieve a number of complex graphics in the desert teachers to share a link, the link in most of the graphics are used Clip-path polygon value to achieve. Unfortunately, it is still only used in chrome40+ browsers. 7.z-index

. hide{
    Position:absolute;
    z-index:-1000;/* does not occupy space, can not click * * 
}

The element is hidden by setting the Z-index value so that other elements are obscured. PostScript

In this tutorial, we looked at 7 different ways to hide elements through CSS. Each method is a little different from the others. Knowing what you want to achieve will help you decide which attribute to use, and over time you can instinctively choose the best way to meet your actual needs. If you have any questions about these methods of hiding elements, please leave a comment in the comments.