点击切换按钮时dateWrapper位置偏移问题求助

我用JavaScript实现了日历组件，点击「Back/Forward（或Önceki/Sonraki）」按钮切换不同date-wrapper元素时，元素位置会上下变动，希望让它保持固定位置。我怀疑是appendChild语句导致的问题，但作为JS新手尝试了多种方法都没解决，相关代码如下：

代码段1（土耳其语版本） #

HTML #

<div id="calendarContainer" class="calendar"></div>

CSS #

#calendarContainer {
}

.date-wrapper { 
  margin-right: 10px;
  border: 1px solid #ddd;
  padding: 10px;
}

JavaScript #

const grouped = Object.groupBy(takvim, date =>date.tarih.substring(0,7))
const calendarContainer = document.getElementById('calendarContainer');
for (const date in grouped) {
  const dateWrapperDiv = document.createElement('div');
  dateWrapperDiv.className = 'date-wrapper';
  const dateDiv = document.createElement('div');
  dateDiv.className = 'date';
  dateDiv.id = `date-${date}`;
  dateDiv.textContent = `Tarih: ${date}`;
  dateWrapperDiv.appendChild(dateDiv);

  grouped[date].forEach(event => {
    const eventDiv = document.createElement('div');
    eventDiv.className = 'event';
    eventDiv.textContent = `- ${event.ad} (${event.miles} ${event.tarih.substring(8,10)})`;
    dateWrapperDiv.appendChild(eventDiv);
  });
  calendarContainer.appendChild(dateWrapperDiv);

  const emptyLine = document.createElement('div');
  emptyLine.innerHTML = ' ';
  calendarContainer.appendChild(emptyLine);
}
const prevButton = document.createElement('button');
prevButton.textContent = 'Önceki';
const nextButton = document.createElement('button');
nextButton.textContent = 'Sonraki';

calendarContainer.parentNode.insertBefore(prevButton, calendarContainer);
calendarContainer.parentNode.insertBefore(nextButton, calendarContainer);

let currentDate = null;

function hideAllDates() {
  const dateWrappers = document.querySelectorAll('.date-wrapper');
  for (const dateWrapper of dateWrappers) {
    dateWrapper.style.display = 'none';
    dateWrapper.style.position = 'static';
  }
}
hideAllDates();

showDate(Object.keys(grouped)[0]);
function showDate(date) {
  const dateDiv = document.getElementById(`date-${date}`); 
  dateDiv.parentNode.style.display = 'block';
  dateDiv.parentNode.style.zIndex = '0';
  currentDate = date;
}

prevButton.addEventListener('click', function() {
  const dates = Object.keys(grouped);
  const index = dates.indexOf(currentDate);
  if (index > 0) {
    hideAllDates();
    showDate(dates[index - 1]);
  }
});

nextButton.addEventListener('click', function() {
  const dates = Object.keys(grouped);
  const index = dates.indexOf(currentDate);
  if (index < dates.length - 1) {
    hideAllDates();
    showDate(dates[index + 1]);
  }
});

function showModal() {
  const modal = document.getElementById('customModal');
  modal.style.display = 'block';
}

function closeModal() {
  const modal = document.getElementById('customModal');
  modal.style.display = 'none';
}
const dateWrappers = document.querySelectorAll('.date-wrapper');
for (const dateWrapper of dateWrappers) {
  dateWrapper.style.position = 'static';
}

代码段2（英语版本） #

HTML #

<div id="calendarContainer" class="calendar"></div>

CSS #

#calendarContainer {}

.date-wrapper {
  margin-right: 10px;
  border: 1px solid #ddd;
  padding: 10px;
}

JavaScript #

const grouped = Object.groupBy(takvim, date => date.tarih.substring(0, 7))
const calendarContainer = document.getElementById('calendarContainer');
for (const date in grouped) {
  const dateWrapperDiv = document.createElement('div');
  dateWrapperDiv.className = 'date-wrapper';
  const dateDiv = document.createElement('div');
  dateDiv.className = 'date';
  dateDiv.id = `date-${date}`;
  dateDiv.textContent = `Date: ${date}`;
  dateWrapperDiv.appendChild(dateDiv);

  grouped[date].forEach(event => {
    const eventDiv = document.createElement('div');
    eventDiv.className = 'event';
    eventDiv.textContent = `- ${event.ad} (${event.miles} ${event.tarih.substring(8,10)})`;
    dateWrapperDiv.appendChild(eventDiv);
  });
  calendarContainer.appendChild(dateWrapperDiv);

  const emptyLine = document.createElement('div');
  emptyLine.innerHTML = ' ';
  calendarContainer.appendChild(emptyLine);
}
const prevButton = document.createElement('button');
prevButton.textContent = 'Back';
const nextButton = document.createElement('button');
nextButton.textContent = 'Forward';

calendarContainer.parentNode.insertBefore(prevButton, calendarContainer);
calendarContainer.parentNode.insertBefore(nextButton, calendarContainer);

let currentDate = null;

function hideAllDates() {
  const dateWrappers = document.querySelectorAll('.date-wrapper');
  for (const dateWrapper of dateWrappers) {
    dateWrapper.style.display = 'none';
    dateWrapper.style.position = 'static';
  }
}
hideAllDates();

showDate(Object.keys(grouped)[0]);

function showDate(date) {
  const dateDiv = document.getElementById(`date-${date}`);
  dateDiv.parentNode.style.display = 'block';
  dateDiv.parentNode.style.zIndex = '0';
  currentDate = date;
}

prevButton.addEventListener('click', function() {
  const dates = Object.keys(grouped);
  const index = dates.indexOf(currentDate);
  if (index > 0) {
    hideAllDates();
    showDate(dates[index - 1]);
  }
});

nextButton.addEventListener('click', function() {
  const dates = Object.keys(grouped);
  const index = dates.indexOf(currentDate);
  if (index < dates.length - 1) {
    hideAllDates();
    showDate(dates[index + 1]);
  }
});

问题原因与解决方案 #

原因分析 #

不是appendChild的问题，而是布局逻辑导致的：

1. 所有date-wrapper和插入的空行都处于正常文档流中，每个元素按顺序占据独立的垂直空间。
2. 切换显示时，当前显示的date-wrapper在文档流中的位置不同（比如第一个在容器顶部，第二个在第一个下方），所以视觉上会出现上下跳动。

解决步骤 #

1. 调整CSS，让所有date-wrapper重叠在同一位置

给容器设置相对定位，内部的date-wrapper用绝对定位固定位置：

#calendarContainer {
  position: relative;
  min-height: 200px; /* 根据内容高度调整，避免容器塌陷 */
}

.date-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin-right: 10px;
  border: 1px solid #ddd;
  padding: 10px;
  display: none; /* 默认隐藏所有日期块 */
}

2. 移除插入空行的代码

空行占据文档流空间，会干扰布局，直接删除以下代码：

// 移除这段代码
/*
const emptyLine = document.createElement('div');
emptyLine.innerHTML = ' ';
calendarContainer.appendChild(emptyLine);
*/

3. 简化显示/隐藏逻辑

不需要修改position属性，直接控制display即可：

function hideAllDates() {
  const dateWrappers = document.querySelectorAll('.date-wrapper');
  dateWrappers.forEach(wrapper => {
    wrapper.style.display = 'none';
  });
}

function showDate(date) {
  const dateDiv = document.getElementById(`date-${date}`); 
  dateDiv.parentNode.style.display = 'block';
  currentDate = date;
}

修改后的效果 #

所有date-wrapper都会固定在calendarContainer的左上角位置，切换按钮点击时只会替换显示的内容，位置不会再发生变动。

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