绝对定位，忽略父填充

首先，让我们看看为什么会这样。

原因是，令人惊讶的是，当一个框具有position: absolute其包含框时，该框是父级的填充框（即，其填充周围的框）。这是令人惊讶的，因为通常（也就是说，使用静态或相对定位时）包含框是父级的内容框。

这是CSS规范的相关部分：

在祖先是一个内联元素的情况下，包含块是为该元素生成的第一个和最后一个内联框的填充框周围的边界框。否则，包含块由的填充边形成。祖先。

正如Winter的答案所建议的那样，最简单的方法是padding: inherit在绝对位置上使用div。但是，仅当您不希望绝对位置div具有自己的任何其他填充时，它才起作用。我认为最通用的解决方案（因为这两个元素可以具有各自独立的填充）：

1. div在绝对位置周围添加一个额外的相对位置（无填充）div。该新对象div将尊重其父对象的填充，然后绝对位置div将填充它。

   缺点当然是，您只是出于演示目的而将HTML弄乱了。

2. 在绝对定位的元素上重复填充（或添加）。

   缺点是您必须在CSS中重复这些值，如果直接编写CSS，这将很容易。但是，如果您使用的是预加工的工具，像SASS或者LESS您可以使用一个变量来避免这个问题。这是我个人使用的方法。