You can find all the code in this post at the repo Github.
You can check the visual here Hiding an element - CodeSandbox
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Hiding Elements</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <div> <pre class="brush:php;toolbar:false">.display-none { display: none; } .outside-by-absolute { position: absolute; left: -9999px; } .outside-by-relative { position: relative; left: -9999px; } .outside-by-margin { margin-left: -9999px; } .hide-by-opacacity { opacity: 0; } .container { position: relative; width: 200px; height: 200px; } .covering-element { position: absolute; width: 100%; height: 100%; z-index: 2; } .hidden-element { position: absolute; width: 100%; height: 100%; z-index: 1; } .hide-by-clip { position: absolute; width: 200px; height: 200px; clip: rect(0px, 0px, 0px, 0px); } .hide-by-transform { transform: scale(0, 0); }
The above is the detailed content of Hiding an element - CSS challenges. For more information, please follow other related articles on the PHP Chinese website!