Eight ways to hide CSS elements

Objective

Summary: This article describes in detail the seven ways to hide elements in a Web page with CSS.

• Original Blog address: from the hidden elements

• Featured Columns && book topics: Front-end attackers (know) && front-end attack (Pinterest)

• Blogger Blog Address: Damonare's personal blog

If you dwell on it, you will have a sigh, a light.

Body

Speaking of hidden elements I think every front-end er can say a few, but can say the whole I think it is not a lot. Bloggers summed up several hidden elements of the method, summarized as follows:

  1  div  {   3  : hidden   4  opacity:0;   visibility:hidden   display:none   position:absolute   8  clip (Clip-path): Rect ()/inset ()/polygon ()   z-index:-1000  10  transform:scaley (0)  11 } 

Why do we need so many ways to hide elements, and what they seem to achieve is the same effect. In fact, each approach actually has some subtle differences that determine which method to use in certain situations. Let's explore the nuances below.

1. Overflow

　　

1 . Hide {     overflow:hidden/**/}

The overflow hidden is used to hide the overflow part of the element, occupying space and unable to respond to click events.

2.opacity

. Hide {    opacity:0; /*  */}. hide_2{    -webkit-filter:opacity (0);     Filter:opacity (0); /* */}

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

Opacity is used to set the transparency of an element, but when set to 0, it is the equivalent of a hidden element. As a result, the element still exists in its original position, occupying space and responding to events. If you intend to use the Opacity property to hide elements in the read-screen software, unfortunately, you will not be able to do so. The element and all its contents are read by the Read screen software, just like other elements on the page. In other words, the behavior of elements is the same as when they are opaque.

3.visibility

. Hide {    visibility:hidden/**/}

As with the Opacity property, the hidden elements will still work for our page layout. The only difference with opacity is that it does not respond to any user interaction. In addition, elements are hidden in the read-screen software.

4.display

. Hide {    display:none; /* */}

The classic display hidden elements, this is completely hidden elements, do not occupy space, it does not affect the layout, of course, can not respond to events.

5.position

. Hide {    position:absolute;    left:-99999px;     top:-90999px; /*  */}. hide-2{    position:relative;    left:-99999px;     top:-90999px; /* */}

Suppose there is an element you want to interact with, but you do not want it to affect your page layout, there is no suitable property to handle the situation (opacity and visibility affect the layout, display does not affect the layout but does not interact directly--the translator notes). In this case, you can only consider moving the element out of the viewable area. This approach does not affect the layout, and it allows elements to remain operational. The use of this approach is not a must.

6.clip/clip-path

. Hide {    position:absolute; /* fixed */     clip:rect (top,right,bottom,left); /*  */} {  clip-path: polygon (0px 0px,0px 0px,0px 0px,0px 0px) ;}

Another way to hide elements is by trimming them. Previously, this could be done through the Clip property, but this property was deprecated (now the browser still supports it), and a better property called Clip-path. The Clip-path attribute is really useful greatly drops have, can easily realize some complex graphics the desert teacher to share a link, the graph of the link is mostly used Clip-path polygon value to achieve. Unfortunately, it is still only available in the Chrome40+ browser.

7.z-index

. Hide {    position:absolute;     z-index:-1000; /* */}

It is also a kind of hiding to have other elements obscure the element by setting the Z-index value.

8. Transform

. Hide {    transform: Scale (0,0)/**/}

Eight ways to hide CSS elements