html - 位置 :absolute on input 有问题

Question

我有this代码:

<div class="areaButton">
    <input type="submit" value="Add">                 
</div>

.areaButton
{
    float:left;
    position:relative;
    width:200px;
    margin-left:18px;
    margin-right:18px;
    background-color:red;
}

.areaButton input
{
    position:absolute;
    right:0px;
    top:0px;
}

但如您所见，输入并没有“感觉到”容器(background-color:red; 在哪里)？

Answer 1

浏览器在某些元素上插入默认边距和填充，这就是 CSS resets是为了。

当您将输入元素标记为 position: absolute 时，它会从 page flow 中取出，并且容器不会扩展以适应元素。您必须向 .areaButton 元素添加高度才能看到背景。

查看我的更新:

http://jsfiddle.net/SZYUe/1/