ホームページ > 記事 > ウェブフロントエンド > 要素を非表示にする - CSS の課題
この投稿のすべてのコードは、リポジトリ Github で見つけることができます。
ここでビジュアルを確認できます 要素の非表示 - 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); }
以上が要素を非表示にする - CSS の課題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。