divを別のdivの間に表示させる

Question

プロフィール画像のレイアウトは4行で、すべてが円です。別のdivが追加情報付きの右側にスライドすると、この情報divはイメージサークルの中心から来て、画像の下にありますが、この情報divを親divにない他のプロフィール画像の上に表示します。これはどうですか？だからあなたは画像を見ることができます：最初の画像から、ユーザーについての情報を含む別のdivが来ますが、そのdivが2番目の画像に表示されるようにします。 ここで働いている例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-インデックスよりも優先されることを意味します。

また、あなたの意図を正しく理解している場合は、サブ要素（.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; 
} 

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