html - 团队页面的两个 div 相互重叠

Question

我意识到这可能是另一个新手问题，但我尝试了不同的方法，但无法解决这个问题。我基本上是在构建一个团队页面，我想在每个团队成员的左侧有一张图片，右侧有一些文本。在这个人的名字下面是标题，在标题下面(在标题和段落之间)是一堆用于电子邮件、LinkedIn 和 Twitter 的徽章链接。为了让徽章在标题下方完美对齐，我使用了一个表格。我想为每个团队成员重复该设置，并让他们堆叠在一起。我现在为一个人(正确显示)在 html 中所拥有的:

<div class="left">
    <img src="url"/>
</div>
<div class="right">  
    <H3>Name</H3>
<H4>Title</H4>
<table>
    <tr>
        <td><a href="mailto:email"><img src="url"/></td>
    <td><a href="http://linkedin.com/url"><img src="url"/></a></td>
    <td><a href="url"><img src="url"/></a></td>
    </tr>
</table>
<p>Experience</p>
<p>Experience</p>
<p>Experience</p>
</div>

这是 CSS:

.left img{
      position:relative; 
      float:left;
      height:15%;
      width:15%;
      top:50px;      
}

.right{
       position: relative;
       float:left;
       margin-top:10px;
}

.right h3{
    color:#39c388;
    font-weight:bold;
    font-family:Arial,sans-serif;
    font-size:28px;
    position:relative;
    top:30px;
    left:20px;
}

.right h4{
    color:#818286;
    font-family:Arial,sans-serif;
    font-size:24px;
    position:relative;
    top:20px;
    left:20px;
}

.right td img{
    width:20px;
    height:20px;
    position:relative;
    top:20px;
    left:20px;
}

.right td{
    width:30px;
}

.right p{
    color:#818286;
    font-family:Arial,sans-serif;
    font-size:20px;
    position:relative;
    top:40px;
    left:20px;
}

到目前为止一切顺利。现在，我想复制此代码并将这些部分堆叠在一起。你会怎么做？我试过围绕整个 html 代码创建一个 div，然后给那个 div 一个类，并使用位置、z-index 等，但没有任何成功。

Answer 1

如果你的意思是“堆叠在彼此之上”，就像彼此分层一样，那么你需要使用:

{position: absolute; top: 0; left: 0} (将顶部和左侧位置调整到您需要的位置)

在容器上 <div> s 用于每个部分。

但是，如果您的意思是页面下方列出的“堆叠在一起”，那么它应该与容器一起使用 <div>原样。您可能需要给容器 <div>和 left div一个{overflow: hidden} (对于 IE 6 - 8 为 {height: 1%})计算其中的 float 子元素。