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/

Answer 2

设置position:absolute会从document flow中删除元素，这意味着它基本上不会占用任何空间。由于这是div中唯一的元素，并且没有高度宽度或填充，它也不会占用任何空间，因此您无法看到背景。

Answer 3

将.areaButton div的高度与输入的高度相同。

.areaButton
{
   height: <same height as the input>;
   ....
}

或在div中放入另一个元素

<div class="areaButton">
    <input type="submit" value="Add">  
    <span>&nbsp;</span>               
</div>

Answer 4

<div class="areaButton">
    <div> THis is the are around the button</div>
    <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;
border:5px solid yellow;
}

位置问题：输入绝对

4 个答案: