确保网页按钮在浏览器窗口调整大小时保持位置的教程

top: 10px;
right: 20px;
bottom: 30px;
left: 40px;

<button type="button" class="button-a" id="button_a">A</button>
<button type="button" class="button-b" id="button_b">B</button>

.button-a {
    top: 1%;
    left: 94%;
    width: 100px;
    height: 40px;
    position: absolute; /* 已在共享样式中定义，此处冗余 */
    background: none;
}
.button-b {
    top: 5.9%;
    left: 94%;
    width: 100px;
    height: 40px;
    position: absolute; /* 已在共享样式中定义，此处冗余 */
    background: none;
}
/* 共享样式，包含 position: absolute */
.button-a,.button-b {
  /* ...其他样式... */
  position: absolute;
  /* ...其他样式... */
}

/* 共享样式，保持不变或根据需要调整 */
html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    border: 0;
    overflow: hidden; /* 禁用滚动条 */
    display: block;  /* 无浮动内容 */
}

.button-a,.button-b {
  padding: 0.6em 2em;
  border: none;
  outline: none;
  color: rgb(255, 255, 255);
  background: rgb(209, 192, 192);
  cursor: pointer;
  position: absolute; /* 确保按钮是绝对定位 */
  z-index: 0;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100px; /* 保持固定宽度 */
  height: 40px; /* 保持固定高度 */
  background: none; /* 按钮背景由伪元素提供 */
}

/* 伪元素样式保持不变，它们相对于按钮进行绝对定位 */
.button-a:before,.button-b:before {
  content: "";
  background: linear-gradient(
    45deg,
    #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-button-color 20s linear infinite;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

@keyframes glowing-button-color {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

.button-a:after,.button-b:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  left: 0;
  top: 0;
  border-radius: 10px;
}

/* 关键改动：使用 inset 结合固定像素值进行定位 */
.button-a {
    /* 10px from top, 10px from right, 'auto' for bottom/left (respecting width/height) */
    inset: 10px 10px auto auto;
}

.button-b {
    /* 60px from top (e.g., button-a's bottom + spacing), 10px from right, 'auto' for bottom/left */
    /* 假设button-a高度40px，间距10px，则button-b顶部距离为10+40+10=60px */
    inset: 60px 10px auto auto;
}