javascript - fadeIn/FadeOut 与 bootstrap (CSS) 重叠的 div

Question

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

但是我似乎无法让 div 正确定位以允许它们在彼此之上淡入/淡出并且让下面的按钮/链接不动。

这是一个 jsFiddle。在不弄乱 Bootstrap 代码的情况下，我似乎无法理解哪个选择器需要什么位置。 https://jsfiddle.net/karlt/8zdotv7o/4/

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

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

.people,
.projects {
  text-align: center;
}
.projects {
  background-color: #46f2e6;
}
.people {
  display: none;
  background-color: #e56767;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container-fluid">


  <div class="row">
    <div class="projects">
      <p>Project 1, Project 2, Project 3, Project, Project</p>
    </div>

    <div class="people">
      <p>Name 1, Name 2, Name 3, Name 4 , Name 5</p>
    </div>
  </div>


  <div class="row text-center">

    <div class="col-md-6">
      <a class="toggle-people">People</a>
    </div>

    <div class="col-md-6">
      <a class="toggle-projects">Projects<a/>
    </div>
     
</div>
        
        

                       
 			

Answer 1

1) 将您的 .people 和 .projects 包装在一个 div 中。

2) 将 position:relative 赋给这个包装器。

3) 将position:absolute 赋给.projects 和.people。

为什么？

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

因此将 position:relative 给包装器是安全的。

这是一个fiddle .