基于父元素的CSS div定位问题：响应式布局下关闭按钮偏移

我在实现响应式布局时遇到难题：设置了两列宽度基于百分比的布局，较宽列内的关闭按钮div需要始终相对父列保持固定的上下、左右边距，不受窗口缩放影响。但当前窗口缩放时，按钮与父列的间距会变化，甚至完全偏移出位置。

原代码 #

CSS部分

body {
    background: grey;
    overflow: hidden;
}

.container-fluid {
    width: 100%;
    margin: auto;
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
}

.col-lg-8 {
    flex: 0 0 auto;
    width: 66.666667%;
}
    
.col-lg-4 {
    flex: 0 0 auto;
    width: 33.333333%;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 50vh;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid rgba(0, 0, 0, 0.125);
    border-radius: 1rem;
    margin: 0.5em;
    padding: 0.5em;
}

.title {
    margin: 0.5em;
    font-size: 3em;
    float: left;
}

.close-btn {
    position: absolute;
    float: left;
    cursor: pointer;
    font-size: 2em;
    left: 57vw;
    top: 2vh;
}

HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Fixed Close Position</title>

    <script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="col-lg-8">
            <div class="card">
                <div class="title">Headline</div>
                <div class="close-btn"><i class="fa-solid fa-circle-xmark"></i></div>                
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card">
                <div class="title">News</div>
            </div>
        </div>
    </div>
</body>

</html>

问题原因 #

核心问题是关闭按钮的定位参考错误：.close-btn用了left: 57vw，这是基于整个视口宽度的绝对定位，而非它的父元素.card（已设置position: relative）。窗口缩放时，视口宽度变化，按钮位置会随之偏移，脱离父容器范围。

解决方法 #

利用父元素的相对定位，给按钮设置基于父容器的固定边距定位：

1. 移除float: left：绝对定位元素无需float属性，它会脱离文档流
2. 替换left: 57vw为基于父容器边角的固定间距，比如用top和right绑定父容器的右上角

修改后的CSS代码（完整版本） #

body {
    background: grey;
    overflow: hidden;
}

.container-fluid {
    width: 100%;
    margin: auto;
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
}

.col-lg-8 {
    flex: 0 0 auto;
    width: 66.666667%;
}
    
.col-lg-4 {
    flex: 0 0 auto;
    width: 33.333333%;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 50vh;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid rgba(0, 0, 0, 0.125);
    border-radius: 1rem;
    margin: 0.5em;
    padding: 0.5em;
}

.title {
    margin: 0.5em;
    font-size: 3em;
    float: left;
}

.close-btn {
    position: absolute;
    cursor: pointer;
    font-size: 2em;
    /* 相对于父容器.card的右上角保持0.5em间距 */
    top: 0.5em;
    right: 0.5em;
}

这样修改后，无论窗口如何缩放，关闭按钮都会始终保持与父容器.card右上角0.5em的固定间距，不会偏移。

内容的提问来源于stack exchange，提问作者ICoded