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

问题描述：

我有配置文件图像4在行中的布局，它们都是圆形的，如果我把它们悬停在另一个div上滑动右边的aditional信息，这个信息div来自图像圆的中心，是在图像下，但我想这个信息的div显示其他配置文件图像顶部不在其父div。这怎么可能。所以你可以看看图片：从第一张图片到另一个div将包含有关用户的信息，但我希望div出现在第二张图片上。这里工作示例https://jsfiddle.net/geass94/rsw6o1hu/使一个div出现在另一个divs之间

<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') 
    });

建议你创建的jsfiddle或其他沙箱中的工作演示，使人们可以用这个叉修改播放 – charlietfl

这里是工作小提琴https://jsfiddle.net/geass94/rsw6o1hu/ 确保要展开预览是为了适合所有4个图像在一行中 – geass94

答

'的位置是：静态' 如果你想的z-index去努力.FM-userpreview不能是静态的。

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

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

看看这个分叉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, 
    }); 
});

我添加了jsfiddle示例来玩 – geass94

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

相关推荐