在保持位置的同时切换子元素之间的可见性

Question

我想在不断变化的内联子元素数量之间切换可见性，如下所示。然而，正如你所看到的，它们跳来跳去，因为它们是内联的(出于语义和响应的原因，它们需要内联(，因此无法设置绝对位置。我正在使用 php cms 作为数据 (kirby(，所以我不能直接将字符串作为有价值的东西获取，所以我的想法是唯一的解决方案是在另一个元素出现之前完全淡化一个元素。

除非有人有其他想法，否则使用以下代码的最佳方法是什么？我无法破解它。谢谢！

$( document ).ready(function() {
$('.greetingWrapper span:gt(0)').hide();
setInterval(function(){
$('.greetingWrapper :first-child').fadeOut()
.next('span').fadeIn()
.end().appendTo('.greetingWrapper');}, 
3000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
<span class="greetingWrapper">
<span>Hello</span>
<span>Bonjour</span>
<span>G'day</span>
<span>Yeoboseyo</span>
</span>
- thanks for joining us.
</h1>

Answer 1

环境是否允许在跨度上使用position: absolute;？

<div>
aaaaaa<span>123</span>345<span></span>abce
</div>
span {
position: absolute;
}

使 123 和 345 重叠