Javascript 相应地重叠2段

对于一个项目，我希望一些段落从一个文本内容过渡到另一个文本内容。我希望使用的方法是在HTML中有两个段落，但一次只能看到一个段落

我的过渡工作很好，但我找不到一种方法来重叠这两个段落。有人知道怎么做吗

以下是我到目前为止所做的（我所缺少的是反应性段落重叠）：

var a=document.getElementById（“开关”）；
a、 onclick=function（）{
document.getElementById（“容器”）.classList.toggle（“show1”）；
document.getElementById（“容器”）.classList.toggle（“show2”）；
返回false；
}

#容器{
边框：1px纯红；
}
.text1，
.text2{
过渡：不透明度1s；
不透明度：0；
边框：1px纯蓝色；
}
.show1>.text1，
.show2>.text2{
不透明度：1；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。莫比·维尔·伊普森·多洛。纳拉维塔拉奥里特turpis。


这是一只猫科动物。这是一种温和的非物质的封建发酵。

如何切换

显示

而不是

不透明度

：

var a=document.getElementById（“开关”）；
a、 onclick=function（）{
document.getElementById（“容器”）.classList.toggle（“show1”）；
document.getElementById（“容器”）.classList.toggle（“show2”）；
返回false；
}

#容器{
边框：1px纯红；
}
.text1，
.text2{
过渡：显示1s轻松；
显示：无；
边框：1px纯蓝色；
}
.show1>.text1，
.show2>.text2{
显示：块；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。莫比·维尔·伊普森·多洛。纳拉维塔拉奥里特turpis。


这是一只猫科动物。这是一种温和的非物质的封建发酵。

这是我能做的最符合您描述的了。我们在这里缺少太多的约束，无法在所有情况下正确显示覆盖段落

var a=document.getElementById（“开关”）；
a、 onclick=function（）{
document.getElementById（“容器”）.classList.toggle（“show1”）；
document.getElementById（“容器”）.classList.toggle（“show2”）；
返回false；
}

#容器{
边框：1px纯红；
位置：相对位置；
}
.text1，
.text2{
过渡：不透明度1s；
不透明度：0；
边框：1px纯蓝色；
}
.show1>.text1，
.show2>.text2{
不透明度：1；
}
.show1>.text2，
.show2>.text1{
位置：绝对位置；
排名：0；
左：0；
右：0；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。莫比·维尔·伊普森·多洛。纳拉维塔拉奥里特turpis。


这是一只猫科动物。这是一种温和的非物质的封建发酵。

即使段落以

不透明度隐藏：0

它们的大小仍由浏览器计算。你需要让它们彼此重叠。 要执行此操作，您需要将

显示：无/块

与

不透明度

相结合

以下是一个例子：

---

定位或边距是唯一理想的“覆盖”方法。换掉内容可能比使用覆盖层更好。因此，基本上你希望红色边框的容器随着内部内容的x-褪色而轻轻改变高度？@Paulie_D在我的项目中，我不会总是有大小类似的段落，在这种情况下，我不希望切换来改变我页面的整体布局。虽然我同意更改内容会更简单。@RokoC.Buljan实际上，我希望红色边框的容器永远不要更改大小，从一开始就适合两段中最大的一段。我希望保持淡入/淡出过渡，尽管这会让事情变得更棘手。