页面缩放时header被button-container覆盖，需实现header推动其下移

Hey, let's get to the root of why your <h1> is getting covered by #button-container when scaling the page. The problem comes down to how you're centering the button container—using margin-top: 35vh plus transform: translate(-50%, -50%) yanks the container out of the normal document flow. That means the header can't "push" it down like it should, so they overlap when the viewport changes.

Here's a better approach that keeps everything in the flow: #

We'll rework the container's centering method so it stays connected to the header's layout, while still keeping your desired look:

• Ditch the margin-left: 50vw and transform: translate(-50%, -50%)—these are what break the document flow connection
• Use margin: 0 auto to center the container horizontally (this keeps it in the flow)
• Replace the fixed 35vh top margin with a more flexible value (like 10vh) to control spacing from the header
• Optional: Swap align-items: baseline for align-items: center to vertically center your logo content (adjust based on your design preference)

Modified CSS Code: #

/*Header*/
h1 {
 text-transform: uppercase;
 width: 100%;
 font-size: 9vw;
 text-align: center;
 margin-top: 4vh;
 border: 1px solid #000;
}
/*Containers*/
#button-container {
 padding: 0;
 margin: 0;
 list-style: none;
 display: flex;
 -webkit-flex-flow: row wrap;
 justify-content: space-around;
 margin-top: 10vh; /* Adjust this value to tweak spacing from the header */
 margin-left: auto;
 margin-right: auto; /* Horizontal centering that stays in the flow */
 width: 90vw;
 align-items: center; /* Vertically centers logo content (optional) */
 background: linear-gradient(to right, transparent 0%, #fff 33%, #fff 66%, transparent 100%);
 border: 1px solid #000;
}
#button-container li {
 position: relative;
 display: inline-block;
 cursor: pointer;
}
/* Text block */
#button-container .html-text-block, .cs-text-block {
 position: absolute;
 bottom: 4px;
 width: 100%;
 height: 30%;
 box-sizing: border-box;
 background-color: #fff;
 padding-left: 5px;
 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
 transition: box-shadow 0.5s cubic-bezier(.25, .8, .25, 1), transform 0.5s cubic-bezier(.25, .8, .25, 1);
}
/* Logo Sizing*/
#button-container .htmllogo, #button-container .csharplogo {
 width: 440px;
 max-width: 100%; /* Adds responsiveness for small screens */
}

Bonus: Small Screen Adaptation #

Adding max-width: 100% to your logo images ensures they shrink to fit the container on vertical or narrow screens, preventing overflow and keeping your layout clean.

Why This Works #

By using margin: 0 auto for centering, the button container stays within the normal document flow. Now the header's height will naturally push the container down, and they'll maintain their spacing no matter how the page is scaled—no more overlap!

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