如何覆蓋其他div的內容，而不是在該div div

我做了一些事情，想知道如何讓一個div覆蓋另一個div和它的內容。我試圖做的有點像youtube，當你在視頻中時，你將鼠標懸停在某個人的頭像上，它會顯示一個帶有頻道藝術和事物的小盒子。這裏是我目前得到的照片screenshot。這裏是我的代碼爲兩個div：
圓形格如何覆蓋其他div的內容，而不是在該div div

#staff-info { 
    width: 400px; 
    height: 300px; 
    background: #999; 
    border: 1px solid #333; 
    border-radius: 6px; 
    margin: 0 auto; 
    position: relative; 
}

員工箱

#staff { 
    width: 256px; 
    height: 60px; 
    margin: 7px 4px 7px 4px; 
    background: #fff; 
    display: inline-block; 
    background: #f3f6f9; 
} 
.staff-avatar { 
    width: 40px; 
    height: 40px; 
    padding: 10px; 
    display: inline-block; 
    float: left; 
} 
.staff-name { 
    display: inline-block; 
    padding-top: 8px; 
} 
.staff-job { 
    padding-top: -100px; 
    font-size: 12px; 
}

灰色區域（主要DIV）

#youtuber-about { 
    width: 890px; 
    height: auto; 
    background: #d5d3d3; 
    margin-left: auto; 
    margin-right: auto; 
    font-size: 16px; 
    padding: 10px 0px 10px 10px; 
    display: inline-block; 
}

HT毫升的div

<div id="staff-info">yolo</div> 
     <div id="youtuber-about" style="color: #333;">Our Staff<br> 
      <?php 
      foreach ($staff as $staff) { 
       echo ' 
       <div id="staff"><img src="'.$staff['avatar'].'" class="staff-avatar"><div class="staff-name">'.$staff['name'].'</div><div class="staff-job">'.$staff['job'].'</div></div>'; 
      } 
      ?> 
     </div>

來源

2014-06-16 blackhawk338

您可以使用工具提示。像這樣的http://onehackoranother.com/projects/jquery/tipsy/ – Nick

要使用，你需要下載他們的來源，我不想使用任何這樣的來源爲我的項目，謝謝你回答 – blackhawk338

試過' 'circular'，'staff'，'grey'等的'html'中的data- *'屬性，'：懸停''data（attr）''在'css'內？ – guest271314

，你可以追加信息div每一個工作人員div每當用戶通過該工作人員將鼠標移動的內部。

$('#youtuber-about > div').mouseover(function(){ 
    $(this).append($('#info')); 
});

然後你就可以風格，用CSS很容易，只需設置信息div是position: absolute;並設置填補了包含元素，設置爲顯示懸停。

See Demo

來源

2014-06-16 16:03:00

好的，所以這看起來不錯，但是，如果你有一個PHP的foreach，那麼它會超過一個。 – blackhawk338

這就是爲什麼我在我的演示中製作了3個圖像容器。這是爲了模擬創建多個容器的'foreach'循環的輸出。請注意，只有一個信息'div'用於所有三個圖像。 –

因此，我很好地處理了我的項目，現在只是爲了讓每個工作人員都有一個單獨的信息框，應該很容易 – blackhawk338

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

我會做的是有一個同時擁有這兩個div的股利和你的CSS和的div的嵌套正確疊加他們一起玩。

絕對和相對定位是作爲第一相當棘手，但一旦你得到它掛起你會做它左右

所以請記住

雙方的div添加到第三空div，然後把你想疊加的那個放在另一個下面。

要如果您使用jQuery移動使用

.something { 
position: absolute 
top:20% 
right:15% 
left:10% 
bottom:20% 
}

來源

2014-06-16 16:02:04 user3053234

如何覆蓋其他div的內容，而不是在該div div

回答

相關問題