动画文本使用absolute定位导致页面布局错乱的解决求助

问题核心原因 #

绝对定位（position: absolute）的元素会完全脱离正常文档流，你给父容器加position: relative只是为绝对定位子元素提供定位参照，不会让父容器被子元素的高度撑开，所以你的.cbp-qtrotator当前实际高度为0，后续内容自然会和它重叠。

方案1：固定父容器高度（适配轮播内容高度相近的场景） #

无需修改JS逻辑，只需给父容器设置最小高度即可撑起占位，数值可根据你最长的轮播文本实际高度调整：

.cbp-qtrotator {
position: relative;
width: 90%;
max-width: 1225px;
/* 新增行，根据实际内容调整数值 */
min-height: 200px;
max-height:600px;
margin: 75px auto 25px;
z-index:90;
}

该方案完全不影响原有动画流畅度，只要所有轮播内容高度不超过设置的min-height就不会出现内容溢出或留白过多的问题。

方案2：JS动态适配高度（适配轮播内容高度差异大的场景） #

如果你的轮播文本长度差别很大，可通过JS动态计算当前展示内容的高度，同步更新父容器高度，修改原有JS代码即可：

$(document).ready(function() {
var divs = $('.cbp-qtcontent');
// 新增：动态设置父容器高度函数
function setRotatorHeight() {
  var currentHeight = $('.cbp-qtcontent.current').outerHeight();
  $('.cbp-qtrotator').height(currentHeight);
}
// 页面加载完成后先初始化一次高度
setRotatorHeight();
// 窗口尺寸变化时重新计算高度适配
$(window).resize(setRotatorHeight);
      
function fade() {
var current = $('.current');
var currentIndex = divs.index(current),
nextIndex = currentIndex + 1;
        
if (nextIndex >= divs.length) {
nextIndex = 0;
}
        
var next = divs.eq(nextIndex);
        
next.stop().fadeIn(1500, function() {
$(this).addClass('current');
// 新增：新内容展示完成后更新父容器高度
setRotatorHeight();
});
        
current.stop().fadeOut(1500, function() {
$(this).removeClass('current');
_startProgress()

setTimeout(fade, 5000);
});
}

function _startProgress(){
$(".cbp-qtprogress").removeAttr('style');
$(".cbp-qtprogress").animate({
 width:"800px",
} , 5000);
}
        
_startProgress()
setTimeout(fade, 5000);
});

如果希望高度变化更顺滑，可给父容器加高度过渡效果：

.cbp-qtrotator {
  /* 原有属性不变，新增过渡属性 */
  transition: height 0.3s ease;
}

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