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一个类，并使用position，z-index等，但没有任何成功。

Answer 1

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

{position: absolute; top: 0; left: 0}（在您需要的位置有顶部和左侧位置）

在每个部分的容器<div>上。

但是，如果您的意思是“堆叠在彼此之上”，就像在页面中列出的一样，那么它应该按原样使用容器<div>。您可能需要为容器<div>和left div提供{overflow: hidden}（以及IE 6 - 8的{height: 1%}）来计算其中的浮动子元素。

团队页面上有两个div

1 个答案: