There are many ways to hide page elements with css.
The first method [opacity: 0;]
opacity Attributes are usually used to set the transparency of an element. From another perspective, if the transparency is 0, the element is visually hidden.
This attribute is not designed to change the bounding box of the element. The element itself still occupies its own position and affects the layout of the web page. It will also respond to user interaction.
The second method [visibility: hidden;]
The second attribute to talk about is visibility.
Setting its value to hidden will hide our element.
Like the opacity attribute, hidden elements will still play a role in our web page layout.
The only difference from opacity is that it does not respond to any user interaction.
In addition, after setting this attribute, the element will be hidden in the screen reader software.
Another thing to note is that if the visibility of an element is set to hidden, but you want to display one of its descendants, you only need to explicitly set the visibility of that descendant element to visible ( Style coverage).
The third method [diaplay: none;]
display The attribute actually hides the element according to the meaning of the word.
Set the display attribute to none to ensure that the element is invisible and even the box model is not generated. With this attribute, the hidden element does not occupy any space.
Not only that, once the display is set to none, any direct user interaction operations on the element will not take effect.
In addition, the screen reader software will not read the content of the element, because the effect produced by this method is as if the element does not exist at all.
Any descendant elements of this element will also be hidden at the same time.
Adding excessive animation to this property is invalid, and any switch between its different state values will always take effect immediately.
But please note that this element can still be accessed through the DOM. So you can manipulate it through the DOM.
The fourth method [position: absolute;]
Assumption There is an element that you want to interact with, but you don’t want it to affect the layout of your webpage. There is no proper attribute to handle this situation (opacity and visibility affect the layout and mdisplay does not affect the layout but cannot directly interact).
In this case, you can only consider moving the element out of the visible area. This method will not affect the layout and may keep the element operable.
Specifically, it is achieved by setting the position attribute to absolute (absolute positioning).
position: absolute;
top: -999px;
left: -999px;
The fifth method [clip-path]
Another way to hide elements is to tailor them, specifically through the clip-path attribute. This attribute is relatively new and the browser compatibility will be relatively poor.
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
But it is still necessary to understand.
“People always have to grow, and cannot always stay where they are.”
position: absolute;
top: -999px;
left: -999px;
clip-path: polygon(0px 0px,0px 0px ,0px 0px,0px 0px);