有没有一种方法可以将元素直接定位在相对定位的元素下面

Question

例如，我在导航栏下方有一个相对较大的图像：

#nav{
    height: 75px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid white;
    background-color: white;
    border-bottom: 2px solid #eeeeee;
}
#main_image{
    position: relative;
    top: 75px; /*height of #nav*/
    width: 100%;
    height: 700px;
}
#content{
    position:relative;
    top: 48px;
  }

但是现在我已经定位了前面的两个元素，下面的其他所有元素都不合适。 #content的一部分已被导致我设置的图片覆盖：

#content{
    position:relative;
    top: 48px;
  }

使其完全显示。这是一种令人讨厌的方法，我觉得可能还有更好的方法。 CSS中是否有任何内容可以告诉元素“将其自身直接放置在元素上方”，从而使#content自然显示在#main_image之后？