I'm trying to make a simple UI in html.
If one div is not visible, the other divs should be centered around the other divs, but this doesn't happen.
If all are displayed
If 2 divs are not visible
My CSS and 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>
I tried doing some overflow stuff but nothing worked for me. Changing relative positions and other positions does weird things.
As you can see, it is not centered. I don't know a lot of centering stuff in css so I'm writing here xD
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
There's nothing wrong with your markup or styling; when setting
visibility: none, your element will not be removed from the normal document flow. The element is still there, just invisible. Try usingdisplay: noneinstead.