Html 阻止表格重叠图像

我有一张桌子，应该放在我网站主页上的图片下面。它在大多数计算机上看起来很棒，但在一些较小的屏幕上，表格与图像重叠。我可以一直把桌子往下推，这只会让它在更大的屏幕上看起来更糟。有没有办法设置位置，使其始终位于图像下方的某个百分比？或者其他类似的东西

以下是图像和表格的css：

#headshot{
position: fixed;
top: 16.5%;
left: 50%;
margin-left: -200px;
}

#outline {
border:0px;
align:center;
position: absolute;
top: 65%;
left: 25%;
}

---

从我在JSFIDLE中看到的情况来看，您希望将图像放在中心位置（

align:center；

不是有效的css），并将表格放在其后面。我需要说的是，您的html非常混乱，将东西与

某物

和类似物结合在一起，这不是有效的html。我建议尝试确保您的代码清晰

也就是说，这是您的工作指南：

我添加了一个包装器并将css更改为：

#wrapper {
    margin: 16.5% auto 0;
}
#outline {
    border:0px;
    margin: 20px auto 0;
}
h1 {
    font-family: title;
    font-size: 20pt;
    letter-spacing: 1px;
    text-align: center;
}
h2 {
    font-family: title;
    font-size: 40pt;
    letter-spacing: 1px;
    text-align: center;
}
@font-face {
    font-family: title;
    src: url(http://nickgertler.com/resources/champagnelimousines.woff);
    font-weigt: 100;
}

---

如果只是屏幕大小，可以使用CSS3媒体查询属性

@media screen and (max-width: 800px) {

  table {

  ..property..
  }
}

---

浮动它们、最小高度、使它们成为连续元素、媒体查询。。。你能提供一份工作报告（说明问题）让我们更好地理解你的意思吗？包含尽可能少的代码来重现您的问题。您混合了固定/绝对定位。不管你做什么，事情总会在某个时候发生的。@FranciscoPresencia谢谢！我知道我需要经常清理代码。我已经有一段时间没做任何工作了，而且我的工作期限很紧，所以我不得不走了。不过非常感谢