HTMLで簡単なUIを作成しようとしています。
1 つの div が表示されない場合、他の div が他の div の中心に配置されるはずですが、これは起こりません。
すべて表示される場合
2 つの div が表示されない場合
私のCSSとHTML:
.playerStats{ 位置: 絶対; 下: 2px; 左: 50%。 変換: 変換(-50%, -50%); } .hud { 幅: 300ピクセル; 左: -15px; /* ポトゼブネ */ ディスプレイ: フレックス; 位置: 相対的; コンテンツの位置揃え: 間のスペース; トランジション: すべて 1 の緩和。 } .stat { 境界半径: 50%; 最大高さ: コンテンツに合わせて; 最大幅: コンテンツに合わせて; 位置: 相対的; オーバーフロー: 非表示; パディング: 2レム; 背景: rgb(20, 20, 20, 0.3); ボックスシャドウ: 0px 0px 15px rgb(0, 0, 0); トランジション: すべて 1 の緩和。 トランジション: 可視性 0.2 秒。 トランジション: 不透明度 0.2 秒。 } .hud .stat img { 幅: 50%; 位置: 絶対; 左: 50%。 トップ: 50%; 変換: 変換(-50%, -50%); トランジション: すべて 1 の緩和。 トランジション: 可視性 0.2 秒。 トランジション: 不透明度 0.2 秒。 } .hud .stat .bg { 高さ: 100%; 幅: 100%; 左: 0; 位置: 絶対; 下: 0; ボックスシャドウ: 15px 15px 15px 15px rgb(115, 0, 230); トランジション: すべて 1 の緩和。 トランジション: 可視性 0.2 秒。 トランジション: 不透明度 0.2 秒。 } <本体> <div class="playerStats"> <div class="hud"> <div class="stat" id="hp-stat"> <div class="bg" id="hp" style="背景色: rgb(115, 0, 230)"></div> <img src="res/hp.png"> </div> <div class="stat" id="panc-stat"> <div class="bg" id="panc" style="背景色: rgb(115, 0, 230)"></div> <img src="res/panc.png"> </div> <div class="stat" id="pluca-stat"> <div class="bg" id="pluca" style="背景色: rgb(115, 0, 230)"></div> <img src="res/pluca.png"> </div> <div class="stat" id="glos-stat"> <div class="bg" id="glos" style="背景色: rgb(115, 0, 230)"></div> <img src="res/glossredni.png"> </div> </div> </div> </本文>
オーバーフロー処理をいくつか実行してみましたが、何も機能しませんでした。 相対的な位置やその他の位置を変更すると、奇妙な動作が行われます。
ご覧のとおり、中央に配置されていません。 CSS のセンタリングについてはあまり詳しくないので、ここに書きます xD
マークアップやスタイルに問題はありません。
visibility: none
を設定すると、要素は通常のドキュメント フローから削除されません。要素はまだ存在しており、目に見えないだけです。代わりにdisplay: none
を使用してみてください。