我试图使简单的用户界面在html。
如果一个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>我试着用溢出做一些事情，但是没有一件事对我有效。从相对位置到其他位置的改变，会产生奇怪的事情。
正如您所看到的，它没有居中。idk在css中居中的东西很多，所以我在这里写xD
1条答案
按热度按时间h4cxqtbf1#
您的标记或样式没有问题;当设置
visibility: none时，您的元素不会从正常文档流中删除。元素仍然存在，只是不可见。请尝试display: none。