求助：如何将按钮固定在国旗下方并实现页面响应式适配？

Let’s tackle both of your issues head-on. I’ll walk through what was causing the problems and share the corrected code with clear explanations:

1. Fixing Button Placement #

The main issues here were invalid positioning rules and messy layout nesting:

• You used display: absolute on .flag-container — that’s not a valid display value. We need position: relative instead to create a proper positioning context for the flag inside it.
• The button container was nested incorrectly, so it wasn’t tied to the flag’s position flow.

2. Adding Mobile Responsiveness #

Fixed pixel values for the flag and button caused overflow on small screens. We’ll switch to relative units, add proportional scaling rules, and use responsive helpers to adapt to different screen sizes.

Corrected Code #

HTML

<div id="stage">
  <div class="container">
    <div class="flag-container">
      <div class="american-flag"></div>
    </div>
    <div class="btn-container">
      <input type="button" class="btn" id="btn" value="Happy Birthday, America!!!" onclick="play(), btnHide()">
      <audio id="audio" src="http://lcweb2.loc.gov/natlib/ihas/service/ssbanner/100010509/100010509.mp3"></audio>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#stage {
  position: relative;
  min-height: 100vh;
  background-color: #000028;
  padding: 2rem 1rem; /* Prevent content from touching screen edges */
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem; /* Consistent space between flag and button */
}

.flag-container {
  position: relative;
  width: 100%;
  max-width: 450px; /* Cap flag at original desktop width */
}

.american-flag {
  position: relative;
  width: 100%;
  max-width: 450px;
  aspect-ratio: 450/260; /* Maintain original flag proportions */
  background-color: #B31C31;
}

.american-flag:after {
  content: '';
  top: 7.7%; /* Use percentage instead of fixed pixels */
  height: 7.7%;
  width: 100%;
  position: absolute;
  background-color: #fff;
  box-shadow: 
    0 15.4% 0 0 #fff, 
    0 30.8% 0 0 #fff, 
    0 46.2% 0 0 #fff, 
    0 61.5% 0 0 #fff, 
    0 76.9% 0 0 #fff;
}

.american-flag:before {
  content: '★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \ ★ ★ ★ ★ ★ ★';
  font-size: clamp(0.8rem, 2.5vw, 19px); /* Responsive font size */
  padding: 3.8% 0 0 2%;
  letter-spacing: 3px;
  line-height: 13px;
  color: #fff;
  position: absolute;
  background-color: #39386E;
  width: 40%; /* 180/450 = 40% */
  height: 50%; /* 130/260 = 50% */
  z-index: 1;
}

.btn-container {
  text-align: center;
  width: 100%;
}

.btn {
  height: 40px;
  width: 100%;
  max-width: 230px;
  background: #fff;
  border: #B31C31 solid 2px;
  border-radius: 10px;
  color: #39386E;
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: bold;
  cursor: pointer;
}

.btn:hover {
  opacity: 0.6;
}

/* Fireworks */
@-webkit-keyframes explosion {
  from { width: 0; opacity: 0; }
  33% { width: 0px; opacity: 0; }
  34% { width: 10px; opacity: 1.0; }
  40% { width: 80px; opacity: 1.0; }
  to { width: 90px; opacity: 0; }
}

@-moz-keyframes explosion {
  from { width: 0; opacity: 0; }
  33% { width: 0; opacity: 0; }
  34% { width: 10px; opacity: 1.0; }
  40% { width: 80px; opacity: 1.0; }
  to { width: 90px; opacity: 0; }
}

.launcher {
  position: absolute;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  background: #fff;
  border-bottom: 3px solid yellow;
}

.launcher div {
  position: absolute;
  opacity: 0;
  left: 3px;
  top: 3px;
  width: 10px;
  height: 4px;
  border-right: 4px solid yellow;
  border-radius: 2px;
  -webkit-animation-name: explosion;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: explosion;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}

Key Changes Explained: #

• Button Placement:
  • Swapped .flag-container’s invalid display: absolute for position: relative to properly contain the flag.
  • Used flex-direction: column on .container with gap to ensure the button stays directly below the flag, no matter the screen size.
• Responsiveness:
  • Replaced fixed pixel values with percentages and clamp() for font sizes to adapt to screen width.
  • Added aspect-ratio to the flag so it scales proportionally without distorting.
  • Set max-width on flag and button to prevent overflow on small screens.
  • Added padding to #stage to keep content from touching screen edges on mobile.

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