current position:Home>Several ways of hiding elements in CSS

Several ways of hiding elements in CSS

2022-04-29 16:26:47Red blue purple

Form writing habits together ! This is my participation 「 Nuggets day new plan · 4 Yuegengwen challenge 」 Of the 28 God , Click to see the event details .

CSS Several ways to hide elements

display: none

The most common way to hide elements , The element is not rendered , So this element doesn't take up a place , Nor will it respond to bound Events .

html

<div></div>
<div onclick="alert(' Red blue purple ')"></div>
<div></div>
 Copy code 

css

body {
    display: flex;
}

div {
    width: 100px;
    height: 100px;
}

div:nth-child(1) {
    background-color: red;
}

div:nth-child(2) {
    display: none;
    background-color: blue;
}

div:nth-child(3) {
    background-color: purple;
}
 Copy code 

image-20220427230639837

visibility: hidden

The element will retain its position in the page , But it will not respond to bound Events

div:nth-child(2) {
    visibility: hidden;
    background-color: blue;
}
 Copy code 

image-20220427230927696

opacity: 0

Set the transparency of the element to 0. So the element will keep its position in the page , It can also respond to listening events of element binding .

div:nth-child(2) {
    opacity: 0;
    background-color: blue;
}
 Copy code 

css

Positioning

Absolute positioning

Because absolute positioning can take elements out of the standard flow , So you just need to set the absolute positioning , You can move the element out of the visual range , This is equivalent to hiding . And because it's out of range , So the listening event is invalid ; The element is out of the standard flow , So it won't keep the position .

div:nth-child(2) {
    position: absolute;
    top: -200px;
    background-color: blue;
}
 Copy code 

image-20220428212006431

Relative positioning

The relative positioning method is similar to the absolute positioning method , It's all about getting elements out of range . The difference is , Relative positioning will not deviate from the standard flow , So it will keep the position .

div:nth-child(2) {
    position: relative;
    top: -200px;
    background-color: blue;
}
 Copy code 

image-20220428213632477

Zoom method

adopt scale Scale elements to 0, Element retention position , Invalid listening event

div:nth-child(2) {
    transform: scale(0, 0);
    background-color: blue;
}
 Copy code 

image-20220428213940493

Reduced hierarchy process

adopt z-index To lower the level of the current element , Let other elements cover the element to hide .

div:nth-child(2) {
    position: absolute;
    z-index: -999;
    background-color: blue;
}
 Copy code 

image-20220428214355252

We used absolute positioning above , May ask questions : Isn't this an absolute positioning method ?

But the above is only one usage , Can also be matched margin To hide , Just let the lower level elements be covered by the higher level elements .

div:nth-child(2) {
    margin-left: -100px;
    z-index: -999;
    background-color: blue;
}
 Copy code 

clip-path Law

clip-path: Use clipping to create a displayable area of an element . Part of the area shows , Hidden outside the area .

You just need to crop the displayable area of the element to 0 that will do , Will keep the position

div:nth-child(2) {
    clip-path: circle(0);
    background-color: blue;
}
 Copy code 

image-20220428220242817

copyright notice
author[Red blue purple],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/04/202204291626420848.html

Random recommended