窗口模式下HTML文本与button-24布局错乱问题求助

全屏模式下页面显示正常，但切换至窗口模式时，“InfotextÜ”、“Infotext”文本以及button-24按钮布局严重错乱。尝试将position设为relative后，文本直接显示在图片上方，无法正常布局。

1. 绝对定位的文本元素（.InfotextÜ、.Infotext）使用固定百分比的left值，窗口宽度变化时，文本位置无法自适应，易与其他元素重叠或溢出。
2. 按钮.button-24使用固定百分比宽度，窗口缩小时按钮过窄，导致内容挤压变形。
3. 直接修改position: relative但未调整布局结构，导致文本与图片重叠。

1. 重构header布局，实现自适应排列 #

将header改为flex布局，让图片、轮播区和文本区域并排显示，窗口变化时自动调整比例，彻底解决绝对定位的布局错乱问题：

• 设置header为display: flex; align-items: center;，让内容垂直居中
• 给各区域分配合适的宽度比例，用gap控制元素间距
• 移除文本元素的position: absolute及相关定位属性，改用容器包裹文本统一控制样式

2. 优化固定按钮的响应式表现 #

• 给按钮添加min-width属性，保证窗口缩小时按钮不会过窄
• 调整内边距，确保按钮文本始终正常显示

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<title>ParadisoPiccolo</title>
<link rel="icon" type="image/png" sizes="192x192" href="https://i.imgur.com/XVO5fKh.png">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
overflow: scroll;
}

h1 {
font-size: 3.5em;
}

h2 {
text-align: center;
font-size: 2em;
padding-top: 2%;
}

p {
margin: 20px 0;
line-height: 1.5;
}

ul {
list-style: none;
margin: 20px 0;
padding: 0;
}

header {
display: flex;
align-items: center;
padding: 2% 5%;
gap: 5%;
flex-wrap: wrap; /* 极端小窗口下自动换行 */
}

li {
margin: 10px 0;
}

.content {
position: relative; 
padding: 20px 1px;
padding-left: 2.5%;
}

#main-image {
width: 50%;
object-fit: cover;
}

#slideshow {
width: 15%;
height: auto;
}

#slideshow img {
width: 100%;
height: 100%;
object-fit: cover;
}

#menu {
position: fixed;  
width: 100%;  
background-color: #333;  
color: #fff;  
z-index: 2;  
padding: 0;
}

.text-container {
width: 30%;
min-width: 280px; /* 防止文本区域过窄 */
}

.InfotextÜ {
font-family: Arno Pro Caption;
font-size: 2.25em;
margin-bottom: 10px;
}

.Infotext {
font-size: 1.6em;
}

.button-24 {
position: fixed;
top: 90%;
left: 50%;
transform: translateX(-50%);
min-width: 180px;
width: 12%;
background: #FF4742;
border: 1px solid #FF4742;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
box-sizing: border-box;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif;
font-size: 1em;
font-weight: 800;
line-height: 16px;
min-height: 40px;
outline: 0;
padding: 12px 20px;
text-align: center;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
}

.button-24:hover,
.button-24:active {
background-color: initial;
background-position: 0 0;
color: #FF4742;
}

.button-24:active {
opacity: .5;
}

footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>

</head>
<body>  
<header> 
<div id="slideshow">
(...)
</div>
<div class="text-container">
<p class="InfotextÜ">Paradiso Piccolo</p>
<p class="Infotext">Das Paradiso Piccolo ist eine Ferienwohnung am See. <br> 
Sehr schön gelegen direkt am Seeufer.<br> Von der eigenen Liegewiese am Strand geht's raus auf <br>
den See zum Schwimmen, Surfen, Segeln oder Kiten. <br> Vom Balkon genießt man am Abend den Blick auf
das Seepanorama. <br> Eine Perle am See.</p>
</div>
<img id="main-image" src="https://i.imgur.com/O0jKPtk.jpg" alt="Foto">
</header>
(...)
</html>

额外说明 #

• flex布局配合flex-wrap: wrap，在极端小窗口下会自动换行，避免内容溢出
• 文本区域和按钮的min-width属性，确保在各种窗口尺寸下内容都能正常显示
• 移除绝对定位后，元素回归文档流，布局逻辑更清晰，无需手动计算定位数值

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