Выровнять заголовок по изображениям в flexbox при изменении размера страницы

я хочу иметь 4 ссылки на список изображений внутри flexbox, но когда я изменяю размер страницы, ссылки проходят через изображения, я считаю, что это потому, что изображения и ссылки не «связаны», и поэтому отступы и поля не работают между ними, но я не знаю, как это исправить. я предполагаю, что мне нужно добавить определенную позицию: команды к ним обоим, чтобы сделать их связанными, но я не знаю.

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 to display images for the chosen chapter
function showImages(chapter) {
    
    const img_list = document.getElementById('imageList');
    img_list.replaceChildren();

    // Loop through the images in the selected chapter
    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);
    });
  }

  // Add click event to the Chapter 1 link
  document.querySelector('#chapter1').addEventListener('click', function(e) {
    e.preventDefault();
    showImages(chapter1);
  });

  // Add click event to the Chapter 2 link
  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);
}
@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;

    /*animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;*/
}
/*@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}*/



.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;
    
}
        <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>

Почему вы используете position: absolute на .mappages? И почему .mappages следует за #imagelist?

Oskar Grosser 08.02.2023 12:29
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
64
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
  1. Поместите «mappages» над «imageList» и удалите абсолютную позицию из «mappages». Также вы должны добавить «flex-wrap: wrap» в «меню».

<div class = "menu">
  <div class = "mappages"></div>
  <ul id = "imageList"></ul>
</div>

или

  1. Если вы хотите сохранить порядок элементов, как сейчас, вы все равно можете использовать абсолютную позицию, но вам нужно добавить padding-top не менее 50-60 пикселей в «меню» родительского элемента, чтобы исправить перекрытие

Другие вопросы по теме