Jquery 使一个div出现在另一个div之间

我有第4行的配置文件图像布局，它们都是圆形的，如果我将鼠标悬停在它们上面，另一个div会向右滑动，带有传统信息，这个信息div来自图像圆形的中心，位于图像下方，但我希望这个信息div显示在其他配置文件图像的顶部，而不是它的父div上。这怎么可能呢。所以你们可以看看这张图片：从第一张图片开始，另一个div将包含关于用户的信息，但我希望这个div出现在第二张图片上。 下面是一个工作示例

testsdagfasdgdsfghfdshsdfhsdfh
.fm用户预览
{
颜色：#333；
文本对齐：居中；
填充物：5px；
位置：静态；
z指数：-1；
}
.fm用户预览a
{
颜色：#fff；
}
.fm用户预览
{
底部：40px；
位置：绝对位置；
右：25%；
左：25%；
填充物：5px；
背景色：rgba（0,0,0,0.2）；
}
.fm userpreview.fm circle
{
宽度：200px；
高度：200px；
盒影：2p2px10px0pxRGBA（0,0,0,0.5）；
保证金：5px；
}
.fm userfullpreview
{
宽度：0px；
高度：200px；
位置：绝对位置；
顶部：10px；
左：50%；
填充：10px；
背景色：rgba（0,0,0,0.2）；
z指数：-1；
浮动：左；
}
$（'.fm userpreview'）.hover（函数（e）{
var id=$（this.attr（'id'）；
$（'.fm userpreview'）.not（$（'#'+id））.css（'z-index'，'-3'））
$（“#用户-”+id）。设置动画({
宽度：350，
});
}，功能（e）{
var id=$（this.attr（'id'）；
$（“#用户-”+id）。设置动画({
宽度：0，
});
$（'.fm userpreview'）。而不是（$（'#'+id））.css（'z-index'，'-1'））
});

---

打开“position:static”。如果希望z-index工作，fm userpreview不能是静态的

来自W3Schools：“位置：静态；不以任何特殊方式定位；它始终按照页面的正常流程定位”。这意味着元素流优先于z索引

此外，如果我正确理解了您的意图，则子元素（.fm userpreview和.fm userfullpreview）上不需要z-index

看看这个叉子

我的方法是将负责悬停的元素放在展开元素之后。这意味着流指示它应该位于顶部。我改变了

位置：静态至<代码>位置：相对。最后，我从这两个元素中删除了z-index，并将其添加到包含的元素中，以确保它高于悬停时的其余元素

.col-md-3:hover {
  z-index: 2;
}

这是完整的工作代码。如果这不是你想要的，让我知道，我可以更新它

.css

.html

建议您在JSFIDLE或其他沙箱中创建一个工作演示，以便人们可以使用此和fork修改。此处是工作FIDLE确保拉伸预览适合在一个rowI添加的JSFIDLE示例中使用的所有4个图像
.col-md-3:hover {
  z-index: 2;
}

.hidden { display: none; }
.invis { opacity: 0; width: 0; height: 0; }

.col-md-3:hover {
  z-index: 2;
}

.fm-userpreview {
  color: #333;
  text-align: center;
  padding: 5px;
  position: relative;
}

.fm-userpreview a{
  color: #fff;
}

.fm-userpreview p{
  bottom: 40px;
  position: absolute;
  right: 25%;
  left: 25%;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.2);
}

.fm-userpreview .fm-circle{
  width: 200px;
  height: 200px;
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
  margin: 5px;
}

.fm-userfullpreview{
  width: 0px;
  height: 200px;
  position: absolute;
  top: 10px;
  left: 50%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  float: left;
}

/* Styling images */
.img{
  width: 150px;
  height: 150px;
  background-size: cover;
  background-position: center center;
  display: inline-block;
}
.fm-avatar{
  position: absolute;
  top: -50px;
  left:20px;
}
.fm-circle{

  border-radius: 100px;
}

<div class="col-md12">
      <div class="col-md-3">
        <div class="fm-userfullpreview" id="user-1">
          testsdagfasdgdsfghfdshsdfhsdfh
        </div>
        <div class="fm-userpreview" id="1">
          <div class="img fm-circle" style="background-image: url('http://i.imgur.com/fB929fH.jpg')">
            <img class="invis" src="http://i.imgur.com/fB929fH.jpg">
            <p><a href="">{fullname}</a></p>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="fm-userfullpreview" id="user-2">
          testsdagfasdgdsfghfdshsdfhsdfh
        </div>
        <div class="fm-userpreview" id="2">
          <div class="img fm-circle" style="background-image: url('http://i.imgur.com/fB929fH.jpg')">
            <img class="invis" src="http://i.imgur.com/fB929fH.jpg">
            <p><a href="">{fullname}</a></p>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="fm-userfullpreview" id="user-3">
          testsdagfasdgdsfghfdshsdfhsdfh
        </div>
        <div class="fm-userpreview" id="3">
          <div class="img fm-circle" style="background-image: url('http://i.imgur.com/fB929fH.jpg')">
            <img class="invis" src="http://i.imgur.com/fB929fH.jpg">
            <p><a href="">{fullname}</a></p>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="fm-userfullpreview" id="user-4">
          testsdagfasdgdsfghfdshsdfhsdfh
        </div>
        <div class="fm-userpreview" id="4">
          <div class="img fm-circle" style="background-image: url('http://i.imgur.com/fB929fH.jpg')">
            <img class="invis" src="http://i.imgur.com/fB929fH.jpg">
            <p><a href="">{fullname}</a></p>
          </div>
        </div>
      </div>
    </div>

$('.fm-userpreview').hover(function(e){
  var id = $(this).attr('id');
  $('#user-'+id).animate({
    width : 350,
  });
},function(e){
  var id = $(this).attr('id');
  $('#user-'+id).animate({
    width : 0,
  });
});