Question

我有4行的个人资料图片布局，它们都是圆形的，如果我在它们上面悬停另一个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

＆＃39;职位：静态＆＃39;如果你想让z-index工作，.fm-userpreview就不会是静态的。

来自W3Schools：＆＃34;职位：静态;没有任何特殊的定位;它始终根据页面的正常流程定位＆＃34;。这意味着元素的流优先于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,
  });
});

让div出现在另一个div之间

1 个答案: