我正在尝试用 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代替。