让一个 div 出现在另一个 div 之间

Question

我有连续 4 个配置文件图像的布局，它们都是圆形的，如果我将鼠标悬停在它们上面，另一个 div 会在右侧滑动附加信息，这个信息 div 来自图像圈的中心并且在图像下方，但我想要此信息 div 显示在其他个人资料图像之上，而不是其父 div。这怎么可能。所以你可以看一下图片：从第一张图片到另一个 div 将包含有关用户的信息，但我希望该 div 出现在第二张图片上。 这是工作示例https://jsfiddle.net/geass94/rsw6o1hu/

    <div class="col-md-3">
  <div class="fm-userpreview" id="{user_ID}">
    <div class="img fm-circle" style="background-image: url('{foto}')">
      <img class="invis" src="{foto}">
      <p><a href="">{fullname}[not-fullname]{username}[/not-fullname]</a></p>
    </div>
  </div>
  <div class="fm-userfullpreview" id="user-{user_ID}">
  testsdagfasdgdsfghfdshsdfhsdfh
  </div>
</div>

.fm-userpreview
{
    color: #333;
    text-align: center;
    padding: 5px;
    position: static;
    z-index: -1;
}

.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);
    z-index: -1;
    float: left;
}

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

Answer 1

如果您希望 z-index 工作，.fm-userpreview 上的“位置：静态”不能是静态的。

来自W3Schools：“位置：静态；没有以任何特殊方式定位；它始终根据页面的正常流程进行定位”。这意味着元素的流动优先于 z-index。

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

看看这个分叉的fiddle

我的方法是将负责悬停的元素放在扩展元素之后。这意味着流程要求它应该在顶部。我在 .fm-userpreview 上将 position: static; 更改为 position: relative;。最后，我从两者中删除了 z-index 并将其添加到包含元素中，以确保它在悬停时高于其余元素。

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

这是完整的工作代码。如果不是你想要的，请告诉我，我可以更新它。

.css

.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;
}

.html

<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>

.js

$('.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,
  });
});