我正在嘗試用 html 製作簡單的 UI。
如果一個 div 不可見，則其他 div 應該以其他 div 為中心，但這種情況不會發生。
如果全部顯示
如果 2 個 div 不可見
我的CSS和HTML：
.playerStats{
position: absolute;
bottom: 2px;
left: 50%;
transform: translate(-50%, -50%);
}
.hud {
width: 300px;
left: -15px;
/* potrzebne */
display: flex;
position: relative;
justify-content: space-between;
transition: all 1s ease;
}
.stat {
border-radius: 50%;
max-height: fit-content;
max-width: fit-content;
position: relative;
overflow: hidden;
padding: 2rem;
background: rgb(20, 20, 20, 0.3);
box-shadow: 0px 0px 15px rgb(0, 0, 0);
transition: all 1s ease;
transition: visibility 0.2s;
transition: opacity 0.2s;
}
.hud .stat img {
width: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: all 1s ease;
transition: visibility 0.2s;
transition: opacity 0.2s;
}
.hud .stat .bg {
height: 100%;
width: 100%;
left: 0;
position: absolute;
bottom: 0;
box-shadow: 15px 15px 15px 15px rgb(115, 0, 230);
transition: all 1s ease;
transition: visibility 0.2s;
transition: opacity 0.2s;
}
<body>
<div class="playerStats">
<div class="hud">
<div class="stat" id="hp-stat">
<div class="bg" id="hp" style="background-color: rgb(115, 0, 230)"></div>
<img src="res/hp.png">
</div>
<div class="stat" id="panc-stat">
<div class="bg" id="panc" style="background-color: rgb(115, 0, 230)"></div>
<img src="res/panc.png">
</div>
<div class="stat" id="pluca-stat">
<div class="bg" id="pluca" style="background-color: rgb(115, 0, 230)"></div>
<img src="res/pluca.png">
</div>
<div class="stat" id="glos-stat">
<div class="bg" id="glos" style="background-color: rgb(115, 0, 230)"></div>
<img src="res/glossredni.png">
</div>
</div>
</div>
</body>
我嘗試做一些溢出的事情，但對我來說沒有任何作用。 改變相對位置和其他位置會產生奇怪的事情。
如您所見，它沒有居中。 我不知道 css 中的許多居中內容，所以我在這裡寫 xD
您的標記或樣式沒有任何問題；當設定
visibility: none時，您的元素不會從正常文件流中刪除。該元素仍然存在，只是不可見。嘗試使用display: none代替。