css - 带有图像的绝对定位(使用相对位置容器)或图像下方没有任何内容会影响其他 div

Question

我什至不知道我的问题是什么，但我会尽力解释它。

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

框的标题文本应该在框外一点，所以我有用户信息框 position: relative 和标题文本 position: 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 -->

然后是 CSS

    /* 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;
}

那应该 可以工作，我看不出有什么理由不能；实际上它正在 工作，侧边栏无论如何都在做它应该做的事情。但有时它会将内容(目前是 h1 和两个文本词)向下推，几乎到 150x150 图像底部的位置。

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

它在以下情况下不工作:

• 头像 div 完全是空的并且标题是position: absolute

• 图像有一个 src 并且标题是position: absolute

但是，它确实在以下情况下起作用(似乎与 header 的绝对定位无关):

• 图片的src为空

• 头像 div 中没有图像，只有文本(即整个 userinfo div 中只有文本)

• userinfo div 完全是空的

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

Answer 1

由于您的 #content div 使用了 display:table-cell;，您还必须应用 vertical-align:top; 来防止您的内容居中:

http://jsfiddle.net/R8zAw/3/

#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 */
}