html - HTML 元素在打开后移动

Question

奇怪的事情正在发生。

页面加载完成后，将显示此选项菜单

但是，如果您关闭菜单然后打开它，菜单将如下所示：

这很奇怪。这里的代码：

<div id="elegir-personaje" class="popUp">
    <button onClick="cerrarElemento(this.parentElement);">x</button>
    <fieldset>
        <legend>sombrero</legend>
        <label><img src="Images/sombrero.png" class="player" /><input type="checkbox" /></label>
        <label><input type="text" /></label>
    </fieldset>

    <!-- More fieldset -->
</div>

.popUp {
    box-sizing: border-box;
    max-height: 500px;
    padding: 10px;
    overflow-y: auto;
    background-color: #d6ebd5;
    box-shadow: 0px 1px 10px 1px #8faa8e;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 99;
    transform: translate(-50%, -50%);
}

/**
 * 
 * @param {HTMLElement} elemento 
 */
function cerrarElemento(elemento) {
    elemento.style.display = "none";
}

/**
 * 
 * @param {HTMLElement} elemento 
 */
function abrirElemento(elemento) {
    elemento.style.display = "block";
}

标签： html