要素を非表示にしつつCSSの位置を保持する方法-CSSチュートリアル-php.cn

要素を非表示にしつつCSSの位置を保持する方法

青灯夜游

リリース： 2021-05-13 14:38:55

オリジナル

5682 人が閲覧しました

CSS では、visibility 属性を使用して要素を非表示にすることができますが、要素の位置は保持します。要素に "visibility: hidden;" スタイルを設定するだけで、要素は非表示になります。、ただし、消えることはなくスペースを占有しており、元の HTML スタイルは非表示後も変更されません。

要素を非表示にしつつCSSの位置を保持する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css は要素を非表示にしますが、位置は保持します

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素隐藏--visibility: hidden</title>
        <style>
            .visibility{
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <div>正常显示元素</div>
        <div class="visibility">隐藏元素</div>
        <div>正常显示元素</div>

    </body>
</html>

ログイン後にコピー

レンダリング:

要素を非表示にしつつCSSの位置を保持する方法

visibility 属性は、要素が見える。

この属性は、要素によって生成される要素ボックスを表示するかどうかを指定します。これは、要素がまだ元のスペースを占めていますが、完全に非表示になる可能性があることを意味します。

#visibility: hidden を使用すると、要素は非表示になりますが、消えることはなく、スペースを占有し、非表示にした後も HTML の元のスタイルは変更されません。表示された設定 visibility:visible; は非表示防止に使用され、要素にバインドされたイベントはトリガーされません。このプロパティを動的に変更すると再描画が発生します。

(学習ビデオ共有:

css ビデオチュートリアル)

以上が要素を非表示にしつつCSSの位置を保持する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。