使一個div出現在另一個divs之間

Question

我有配置文件圖像4在行中的佈局，它們都是圓形的，如果我把它們懸停在另一個div上滑動右邊的aditional信息，這個信息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-索引。

此外，如果我正確理解您的意圖，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, 
    }); 
});