相对位置内的绝对位置，元素超过父母的宽度？

Question

请参考小提琴：http://jsfiddle.net/ukzKT/8/。

我希望内部div＃this-bottom保持在底部，但它的宽度应该像其中的任何其他div一样。即它应该留在父div #top的填充区域内。

CSS

#top{
    width:300px;
    position:relative;
    padding:20px;
    border:1px solid #222;
}
#this-bottom{
    position:absolute;
    bottom:0;
    border:1px solid #333;
    right: 18px;
    left: 20px;
}
#other{
    width:100%;
    border:1px solid #333;
}

HTML 的

<div id='top'>
    <div id='other'>
        This is 1 <br />
        THis is 2 <br />
        This is 3 <br />

    </div>
    <div id='this-bottom'>
        This should be bottom
    </div>
</div>

Answer 1

div超出父级的原因是width 100%和left被分配了默认值（'auto'） - 在这种情况下是由20px引起的padding。因此div会在父容器之外传递20px。

要阻止这种情况发生，您可以设置left: 20px和right: 20px（与填充相同）并移除width: 100%