Javascript fadeIn/FadeOut重叠DIV与引导（CSS）

对bootstrap来说是相当新的。。我希望两个div以不同的内容相互重叠，下面的链接分别切换它们

然而，我似乎无法将div正确定位，以允许它们在彼此上方淡入/淡出，并使下面的按钮/链接不移动

这是一个JSFIDLE。我似乎无法在不弄乱引导代码的情况下了解选择器需要什么位置

$（“.toggle people”）。在（'click'，function（）上{
$（“.people”）.fadeIn（1000）；
美元（“.projects”）。淡出（1000）；
});
$（“.toggle projects”）。在（'click'，function（）上{
美元（“.people”）。淡出（1000）；
美元（“.projects”）。法代因（1000）；
});
。人们，
.项目{
文本对齐：居中；
}
.项目{
背景色：#46f2e6；
}
.人{
显示：无；
背景色：#e56767；
}

项目1，项目2，项目3，项目，项目

姓名1、姓名2、姓名3、姓名4、姓名5

人
项目
我对你的小提琴进行了一些修改，以达到你所说的效果


基本上，我使用了
position:absolute
让他们坐在同一个区域。希望能有帮助。
但是，这并不是一个完美的响应，因为绝对定位使元素与DOM中的其他元素的顺序不同。
1）将您的
.people
和
.projects
包装在一个div中

2） 将
位置：相对
指定给此包装器

3） 将
位置：绝对
赋予
项目
和
人员

为什么?

因为当您将
position:absolute
赋予一个div时，它将相对于具有
position
的父div进行定位，如果找不到这样的父div，则它将相对于else body进行定位

因此，给包装器指定
位置：relative
是安全的

这是一个。
您也可以保留相同的设计并增加延迟

    $(".toggle-people").on('click', function() {
   $(".projects").fadeOut(1000);
    $(".people").delay(1000).fadeIn(1000);

});

$(".toggle-projects").on('click', function() {
   $(".people").fadeOut(1000);
   $(".projects").delay(1000).fadeIn(1000);
});