Question

我试图理解绝对的位置。我有以下代码段

Posts.find().populate('userId').exec(function(err, posts) {
    if (err) throw err;
    console.log(users); // Here you get your posts with users if exists
});

div#div1 {
  position: absolute;
  left: 0;
  right: 0;
  height: 100px;
  border: 1px solid green;
  background-color: green;
  width: 100%;
}

td {
  position: relative;
  border: 1px solid blue;
  height: 18px;
  width: 100%;
}

table {
  width: 100%;
}

由于定位绝对，我在顶部获得了一些额外的空白区域。当我指定 <table> <tr> <td> <div id="div1"> This is a heading with an absolute position </div> </td> </tr> </table> 时，它运行正常。

有人可以解释为什么在仅使用左右定位时会留下一些空间。

Answer 1

表格单元格的默认vertical-align为baseline。可以在下面的第一个<table>中看到这种效果。

这会导致表格内容，文字或<div>放置在垂直中心周围。

如果您想将<div>移到顶部，vertical-align: top;就可以了。或top: 0;。

div#div1 {
  position: absolute;
  left: 0;
  right: 0;
  height: 100px;
  border: 1px solid green;
  background-color: green;
  width: 100%;
  box-sizing: border-box;
}

td {
  position: relative;
  border: 1px solid blue;
  height: 100px;
  width: 100%;
}

table {
  width: 100%;
}

<!DOCTYPE html>
<html>

<body>
  <table>
    <tr>
      <td>
        Some text
      </td>
    </tr>
  </table>

  <table>
    <tr>
      <td>
        <div id="div1">This is a heading with an absolute position</div>
      </td>
    </tr>
  </table>
</body>

</html>

Answer 2

这是因为您将<div>放入<td>标记中。

表格单元格的基本垂直位置是中间。

见下面的例子：

div {
    background-color: yellow;
    width: 100%;   
}

div#absolute {
    position: absolute;
}

div#absolute-top0 {
    position: absolute;
    top: 0;
}

table {
    width: 100%;
}

td {
    border: 1px solid blue;
    height: 40px;
    padding: 0; 
    position: relative;
    width: 100%;  
}

<table>
    <tr>
        <td>
            <div>
                This is a div <b>without</b> an absolute position.
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="absolute">
                This is a div <b>with</b> an absolute position.
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="absolute-top0">
                This is a div <b>with</b> an absolute position and top: 0.
            </div>
        </td>
    </tr>
</table>

Answer 3

那是因为你已经相对于这里的td位置。改变也是绝对的。你在那里没有空间。

这里是=＆gt;的 DEMO

div#div1 { position: absolute; top: 20px; left: 0; right:0; height:100px; border: 1px solid green; background-color:green; width:100%; } td { position:absolute; background:red; height:18px; width:100%; } table { width:100%; } <table> <tr> <td> <div id="div1">This is a heading with an absolute position</div> </td> </tr>

div在td中绝对定位时留空间

3 个答案: