页面缩放时Flexbox内图片上方导航链接的重叠问题修复

开发者阿泽

2026-8-2

问题

我想在Flexbox容器内的图片列表上方放置4个导航链接，但页面缩放时链接会和图片重叠。我猜测是因为图片与链接未建立关联，导致padding和margin无法生效，需要给两者添加特定position属性，但不知道具体操作方法。

相关代码

HTML

<header>
    <h1>Map Gallery</h1>
</header>

<div class="menu">
    <ul id="imageList"></ul> 
    <div class="mappages">
        <a href="#" id="chapter1">Chapter 1</a>
        <a href="#" id="chapter2">Chapter 2</a>
        <a href="#" id="chapter3">Chapter 3</a>
        <a href="#" id="chapter4">Chapter 4</a>
    </div>
</div>

CSS

@charset "utf-8";
/* CSS Document */

body {
    background-image: url("../images/background-maps.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    
    padding:0;
    margin:0;

    opacity: 0;
    transition: opacity 1s;
}

.menu{
    background-color: rgba(255,255,255,0.5);
    
    justify-content: center;
    display: flex;
    margin: 0 auto;
    width:55%;
    height: 100%;
    padding:10px;
    position: relative;
}

.menu ul{
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.menu li{
    width: 20%;
    min-width: 200px;
    margin: 15px;
    text-align: center;
}

.menu img{
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

.menu li span{
    padding: 5px;
}

a{
    font-size: 20px;
    font-weight: 200;
    padding:5px;
}

h1{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    font-size: 75px;
    text-align: center;
    text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;

    margin: auto;
    padding: 5px;
}

.mappages{
    padding: 5px;
    position: absolute;
    top: 8px;
    left: 16px;
}

JavaScript

const chapter1 = [];
for (let i = 1; i <= 49; i++){
    chapter1.push({src: `../images/maps/chapter1/${i}.jpg`, alt: `Map ${i}`});
}
const chapter2 = [{src: '../images/maps/76.jpg'}];
const chapter3 = [{src: '../images/maps/64.jpg'}];
const chapter4 = [{src: '../images/maps/98.jpg'}];

// 显示选中章节的图片
function showImages(chapter) {
    const img_list = document.getElementById('imageList');
    img_list.replaceChildren();

    chapter.forEach(image => {
        const li = document.createElement('li');
        const img = new Image();
        
        img.src= image.src;
        img.alt=image.alt;
        li.append(img);
        
        const span = document.createElement('span');
        span.textContent = "Image";
        
        li.append(span);
        img_list.appendChild(li);
    });
}

// 章节1点击事件
document.querySelector('#chapter1').addEventListener('click', function(e) {
    e.preventDefault();
    showImages(chapter1);
});

// 章节2点击事件
document.querySelector('#chapter2').addEventListener('click', function(e) {
    e.preventDefault();
    showImages(chapter2);
});

document.querySelector('#chapter3').addEventListener('click', function(e) {
    e.preventDefault();
    showImages(chapter3);
});

document.querySelector('#chapter4').addEventListener('click', function(e) {
    e.preventDefault();
    showImages(chapter4);
});

window.onload =  function(){
    document.body.style.opacity = 1
    showImages(chapter1);
}

解决方案

问题根源是.mappages使用了position: absolute，该属性会让元素脱离正常文档流，不再占据空间，导致图片列表向上挤压与导航重叠。无需用绝对定位实现“上方放置”，利用Flexbox的垂直排列即可解决，具体步骤如下：

调整HTML结构：将.mappages移至#imageList之前，确保文档流中导航默认在图片上方
修改Flex容器属性：给.menu添加flex-direction: column实现垂直排列，同时移除height: 100%避免容器过度拉伸
移除绝对定位：删除.mappages的position: absolute、top、left属性，让元素回到正常文档流
优化导航样式：给.mappages添加内外边距，让导航链接排版更合理

修改后的代码

HTML

<header>
    <h1>Map Gallery</h1>
</header>

<div class="menu">
    <div class="mappages">
        <a href="#" id="chapter1">Chapter 1</a>
        <a href="#" id="chapter2">Chapter 2</a>
        <a href="#" id="chapter3">Chapter 3</a>
        <a href="#" id="chapter4">Chapter 4</a>
    </div>
    <ul id="imageList"></ul> 
</div>

CSS

@charset "utf-8";
/* CSS Document */

body {
    background-image: url("../images/background-maps.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    
    padding:0;
    margin:0;

    opacity: 0;
    transition: opacity 1s;
}

.menu{
    background-color: rgba(255,255,255,0.5);
    
    justify-content: flex-start;
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width:55%;
    padding:10px;
}

.menu ul{
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.menu li{
    width: 20%;
    min-width: 200px;
    margin: 15px;
    text-align: center;
}

.menu img{
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

.menu li span{
    padding: 5px;
}

a{
    font-size: 20px;
    font-weight: 200;
    padding:5px;
    margin: 0 10px;
}

h1{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    font-size: 75px;
    text-align: center;
    text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;

    margin: auto;
    padding: 5px;
}

.mappages{
    padding: 10px 0;
    margin-bottom: 15px;
}

JavaScript（无需修改）

const chapter1 = [];
for (let i = 1; i <= 49; i++){
    chapter1.push({src: `../images/maps/chapter1/${i}.jpg`, alt: `Map ${i}`});
}
const chapter2 = [{src: '../images/maps/76.jpg'}];
const chapter3 = [{src: '../images/maps/64.jpg'}];
const chapter4 = [{src: '../images/maps/98.jpg'}];

// 显示选中章节的图片
function showImages(chapter) {
    const img_list = document.getElementById('imageList');
    img_list.replaceChildren();

    chapter.forEach(image => {
        const li = document.createElement('li');
        const img = new Image();
        
        img.src= image.src;
        img.alt=image.alt;
        li.append(img);
        
        const span = document.createElement('span');
        span.textContent = "Image";
        
        li.append(span);
        img_list.appendChild(li);
    });
}

// 章节1点击事件
document.querySelector('#chapter1').addEventListener('click', function(e) {
    e.preventDefault();
    showImages(chapter1);
});

// 章节2点击事件
document.querySelector('#chapter2').addEventListener('click', function(e) {
    e.preventDefault();
    showImages(chapter2);
});

document.querySelector('#chapter3').addEventListener('click', function(e) {
    e.preventDefault();
    showImages(chapter3);
});

document.querySelector('#chapter4').addEventListener('click', function(e) {
    e.preventDefault();
    showImages(chapter4);
});

window.onload =  function(){
    document.body.style.opacity = 1
    showImages(chapter1);
}

说明

移除绝对定位后，导航和图片列表都处于正常文档流，Flexbox垂直排列会让它们从上到下依次布局，不会再重叠
flex-direction: column是核心改动，实现容器内元素的垂直排布
调整内外边距后，导航与图片之间有合理间距，页面缩放时布局会自适应

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

页面缩放时Flexbox内图片上方导航链接的重叠问题修复

相关代码 #

HTML #

CSS #

JavaScript #

解决方案 #

修改后的代码 #

HTML

CSS

JavaScript（无需修改）

说明 #

相关代码

HTML

CSS

JavaScript

解决方案

修改后的代码

说明