Css 绝对定位（带相对位置容器）下有图像或无图像影响其他div

我甚至都不知道我的问题是什么，但我会尽力解释清楚

基本上我有一个两列的布局。左边是内容，目前只包含h1和填充文本。右边是侧边栏，它的userinfobox中应该有一个div

框的标题文本应该在框外一点，所以我有userinfobox位置：relative，标题文本位置：absolute 然后，在盒子里面的下面，有一个150x150的图像，下面还有一些文字

以下是HTML：

<!-- Main Content -->
<div id="contentwrapper" role="presentation">
    <div id="content" role="main">
        <h1>Header</h1>
        Content <a href="#">link</a>
    </div> <!-- content div -->

    <!-- Sidebar -->
    <div id="sidebar" role="complementary">
        <div id="userinfobox">
            <p id="header">User Info</p>
           <div id="userinfo">
           <div id="avatar"><img src="" id="tag" alt="tag" /></div>
            <p class="username">Username #</p>
            <p id="icons">Icons</p>
            <p id="membersonline"><a href="membersonline.php">Online Members (#)</a></p></div>
        </div> <!-- userinfo div -->
</div> <!-- userinfobox div -->
    </div> <!-- sidebar div -->
</div> <!-- contentwrapper div -->

这应该是有效的，我看不出有任何理由不起作用；实际上它正在工作，侧边栏正在做它应该做的事情。但有时它会将当前的内容（h1和两个文字）向下推，几乎推到150x150图像的底部

我将尝试列出导致它执行此操作的条件：

在以下情况下，它不起作用：

化身div完全为空，标题为position:absolute

图像有一个src，标题是position:absolute

但是，当看起来与标题的绝对位置无关时，它确实起作用：

图像的src为空

阿凡达分区中没有图像，只有文本，即整个用户信息分区中只有文本

userinfo div完全为空

我只是不明白它是如何影响一个完全不同的分区中的某些内容。我尝试搜索的每个地方都谈到了相对定位元素中绝对定位的元素如何不会影响外部的任何内容，以及如何使用它们。此外，这是一个固定的宽度设置，所以它不像宽度是在改变所有；它也不基于百分比。

因为您的内容div正在使用display:table cell；，还必须应用垂直对齐：顶部；要防止内容居中，请执行以下操作：

---

从你的描述我也很难说出你的问题是什么。你到底想做什么，但没有成功？PS-您的div没有像您声称的那样浮动。如果删除position:relative并添加float:left或float:right，则divs将被浮动，如果这是问题所在，则标题文本不会向下推。Oops。我有罪！我忘了我把它改了，这样就不会有漂浮物了。很抱歉。你能发一把小提琴吗？好的，这是src里的图片。标题应该与userinfo框的顶部对齐。

    /* Main Content */

     #contentwrapper {
        min-height: 400px;
        height: 100%;
        position: relative;
        display: table;
        font-size: 1em;
    }

    #content {
        width: 669px;
        height: 100%;
        padding: 20px;
        position: relative;
        display: table-cell;
        background-color: #F7F8F7;
        text-align: left;   
    }

    #content h1 {
        margin-bottom: 20px;
        font-size: 2.75em;
        line-height: 1em;
    }

    /* Sidebar */

    #sidebar {
        width: 234px;
        height: 100%;
        padding: 20px;
        position: relative;
        color: #0D130D;
        background-color: #FDEBCF;
        display: table-cell;
        text-align: center;
 }
 #sidebar p#header {
    position: absolute;
    top: -10px;
    font-size: 1.5em;
    line-height: 1em;
    text-align: left;
    overflow: hidden;
}

#sidebar p {
    max-width: 214px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}

/* Logged In Sidebar */

#userinfobox {
    width: 214px;
    max-width: 214px;
    padding: 10px;
    position: relative;
    background-color: #F7F8F7;
}

#avatar, #tag, #userinfo {
    margin: 0 auto;
    position: relative;
    display: block;
    outline: 1px solid #000;
    overflow: hidden;
}

#avatar, #tag {
    width: 150px!important;
    height: 150px!important;
}

#content {
  width: 669px;
  height: 100%;
  padding: 20px;
  padding-top: 0;
  position: relative;
  display: table-cell;
  background-color: #F7F8F7;
  text-align: left;
  border-bottom-left-radius: 5px;
  vertical-align: top; /* add this */
}