如何在白色面板右上角定位并调整关闭按钮尺寸且避免布局变形？

我看了你的代码，问题主要出在关闭按钮（.burger）没有正确定位，而且初始尺寸太大，调整时会挤压页面布局。下面是具体的修复方案：

核心修改步骤 #

• 给关闭按钮容器添加绝对定位：利用父元素.amd-app已经设置的position: relative，让.close可以相对于它定位到右上角。
• 缩小关闭按钮的尺寸：调整.burger的内边距和.rect的宽高，让按钮变小且不占过多空间。
• 修正按钮激活状态的变换参数：因为按钮尺寸缩小了，原来的旋转位移数值需要同步修改，确保点击后能正确变成叉号。
• 避免与其他元素重叠：调整.amd-intro的内边距，防止关闭按钮和下方的水平线重叠。

修改后的CSS代码 #

.settings-container .amd-app {
 margin: auto;
 padding: 10px;
 background-color: white;
 width: 575px;
 height: 280px;
 border-radius: 20px;
 position: relative; /* 父元素保持相对定位，为子元素绝对定位提供参照 */
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* 新增：给关闭按钮容器设置绝对定位 */
.close {
 position: absolute;
 top: 10px;
 right: 10px;
}
label {
 font-family: "Montserrat", sans-serif;
 font-size: 1.2rem;
 cursor: pointer;
 display: block;
 margin: 1em;
}
label > input {
 display: none;
}
label span {
 color: #6A759B;
}
label i {
 display: inline-block;
 width: 64px;
 height: 40px;
 border-radius: 20px;
 vertical-align: middle;
 transition: 0.25s 0.09s;
 position: relative;
 background: #deeff7;
}
label i:after {
 content: " ";
 display: block;
 width: 30px;
 height: 30px;
 top: 5px;
 left: 5px;
 border-radius: 50%;
 background: #fff;
 position: absolute;
 box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
 transition: 0.15s;
}
label > input:checked + i {
 background: #1094fb;
}
label > input:checked + i + span {
 color: #29316b;
}
label > input:checked + i:after {
 transform: translateX(25px);
}
body {
 background: #708fd4;
}
.filter {
 position: absolute;
}
/* 修改：缩小burger的内边距，调整flex对齐方式 */
.burger {
 display: flex;
 flex-direction: column;
 filter: url(#gooeyness);
 padding: 10px; /* 原来的30px太大，改成10px */
 gap: 8px; /* 添加间距，让三条线更紧凑 */
 align-items: center; /* 让线条居中 */
}
/* 修改：缩小rect的宽高，让按钮变小 */
.rect {
 background: black;
 display: inline-block;
 height: 6px; /* 原来的32px改成6px */
 transition: transform 500ms;
 width: 40px; /* 原来的200px改成40px */
 border-radius: 3px; /* 添加圆角，看起来更柔和 */
}
.rect:nth-child(2) {
 transition-delay: 100ms;
}
.rect:nth-child(3) {
 transition-delay: 100ms;
}
/* 修改：根据新的rect尺寸调整变换参数，确保变成正确的叉号 */
.burger.active .rect:nth-child(1) {
 transform: rotate(-45deg) translateX(-9px) translateY(9px);
}
.burger.active .rect:nth-child(2) {
 transform: rotate(45deg);
}
.burger.active .rect:nth-child(3) {
 transform: rotate(-45deg) translateX(9px) translateY(-9px);
}
/* 修改：给amd-intro添加上边距，避免和关闭按钮重叠 */
.amd-intro {
 padding-top: 40px;
}

代码说明 #

1. 绝对定位.close：通过position: absolute结合top:10px和right:10px，让关闭按钮固定在白色面板的右上角，不会影响其他元素的布局流。
2. 缩小按钮尺寸：把.rect的宽高从200px/32px改成40px/6px，同时减小.burger的padding，让按钮变成合适的大小。
3. 修正变换参数：因为按钮尺寸变小了，原来的旋转位移数值（比如translateX(-51px)）不再适用，改成translateX(-9px)这类小数值，确保点击后三条线能正确组合成叉号。
4. 调整内边距：给.amd-intro添加上边距，避免关闭按钮和下方的<hr>元素重叠。

这样修改后，你就可以自由调整关闭按钮的尺寸，同时它会一直固定在面板右上角，不会破坏页面布局。

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