Question

我正在制作一些东西，我想知道如何让div覆盖另一个div和它的内容。我试图做的有点像youtube，当你在视频上并且你将鼠标悬停在某个人的头像上时，它会显示一个带有他们的频道艺术和东西的小盒子。这是我目前得到的照片screenshot。这是我的两个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;
}

灰色区域（主要区域）

#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;
}

html for divs

<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>

Answer 1

如果您使用的是jQuery，只要用户将鼠标移到该职员上，您就可以在每个职员div内附加信息div。

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

然后您可以非常轻松地使用CSS设置样式，只需将信息div设置为position: absolute;并设置为填充包含元素，设置为在悬停时显示。

See Demo

Answer 2

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

我要做的是有一个包含这两个div的div，并使用你的CSS和div的嵌套来正确覆盖它们。

首先绝对和相对定位是相当棘手的，但是一旦你掌握它，你就会左右这样做

请记住

将两个div添加到第三个空div，然后将你想要的那个重叠在另一个下面。

移动使用

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

如何将div叠加在另一个div的内容上，而不是在div中

2 个答案: