如何覆盖其他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

回答

相关问题