How to control element hiding with css

Method: 1. Use "opacity:0;"; 2. Use "visibility: hidden;"; 3. Use "diaplay:none;"; 4. Use "position:absolute;top:-999px ;"; 5. Use the clip-path attribute.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

There are many ways to hide page elements using css.

First method: opacity: 0;

The opacity property is usually used to set the transparency of an element when viewed 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 contributes to the layout of the web page. It will also respond to user interaction.

Second method: visibility: hidden;

The second attribute to talk about is visibility.

Set its value to hidden will hide our element.

Like the opacity attribute, hidden elements will still affect 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 reading 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 descendant elements, you only need to explicitly set the visibility of that descendant element to visible (style cover).

The third method: diaplay: none;

The display attribute truly 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. Using this attribute, the hidden element does not occupy any space.

Not only that, once display is set to none, any direct user interaction operation on the element will not be effective.

In addition, screen reading software will not read the content of the element, because this method produces the effect 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 switching between its different state values ​​will always take effect immediately.

However, please note that this element can still be accessed through the DOM. So you can manipulate it through the DOM.

Fourth method: position: absolute;

Suppose there is an element that you want to interact with, but you don’t want it Affects the layout of your web page, there is no suitable attribute to handle this situation (opacity and visibility affect the layout, mdisplay does not affect the layout but cannot interact directly).

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, this is achieved by setting the position attribute to absolute (absolute positioning).

position: absolute;
top: -999px;
left: -999px;

Fifth method: clip-path

Another way to hide elements is by clipping them, specifically through clip -path attribute, this attribute is relatively new, and browser compatibility will be relatively poor.

clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);

But it is still necessary to understand it.

(Learning video sharing: css video tutorial)

The above is the detailed content of How to control element hiding with css. For more information, please follow other related articles on the PHP Chinese website!