当浏览器窗口变小时线条会移动 - CSS

Question

正如标题中已经描述的，当窗口变小时，线条不会保持在原来的位置。一切都应该保持静态。

如果您对代码有任何改进，请告诉我。我还是新人

我的html

<header>
    <div class="container">
        <div class="box"></div>

        <div class="control_text">
            <h3>Login</h3>
            <p>Enter your Minecraft Username</p>
        </div>

        <div class="switch_lines_container">
            <div class="switch_lines active"></div>
            <div class="switch_lines inactive"></div>
        </div>
    </div>
</header>

我的CSS

    position: absolute;
    top: 18.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
}

.switch_lines.active {
    width: 5.81875rem;
    height: 0.0625rem;
    background: #FFF;
}

.switch_lines.inactive {
    width: 5.81875rem;
    height: 0.0625rem;
    background: #555555;
} 

Answer 1

向元素块中的一个元素显式定义

top

CSS 属性，并忽略块中其余元素的相同属性肯定会出现无响应的行为。

将

top

属性添加到其余

switch_lines

元素或完全删除它