html - 带有“位置：绝对”的内部按钮将放置在表格之外

Question

html:

<br/><br/><br/><br/><br/>

<table>
<tr>
    <td class="container">
        <button class="del">delete</button>
    </td>
</tr>
</table>

<br/><br/><br/><br/><br/>

<div class="container">
<button class="del">delete</button>
</div>​

CSS：

.container {
    position: relative;
    border: 1px solid red;
    height: 50px;
    width: 200px;
}

.del {
    position: absolute;
    top: 3px;
    right: 3px;
}​

为什么a里面的按钮div会放在div的右上角，而a里面的按钮td会放在桌子外面？

如何解决？

查看活动演示：http: //jsfiddle.net/Freewind/d6Tug/

Answer 1

我认为这与a的显示风格有关td，即table-cell。如果将其设置为display:block，它将正常工作。

只需添加display:block到您的 .container 样式中。

正如freewind指出的那样，如果您的浏览器支持td，最好使用inline-block它，因为td通常显示在一行中。

Answer 2

给出一个元素position:absolute;会相对于它的包含块放置它。由于表格单元格不被视为块容器（与 a 不同div），因此它相对于文档正文本身放置它。top:3px;将其从文档的顶部边框right:3px;移出 3px，并将其从右边框移出 3px。

http://reference.sitepoint.com/css/position