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

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

下面是CSS规范的相关部分:

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

最简单的方法——正如Winter的回答中建议的那样——是在绝对定位的div上使用padding: inherit。不过，只有当你不希望绝对定位的div有任何自己的额外填充时，它才有效。我认为最通用的解决方案(两个元素都可以有自己独立的填充)是:

Add an extra relatively positioned div (with no padding) around the absolutely positioned div. That new div will respect the padding of its parent, and the absolutely positioned div will then fill it. The downside, of course, is that you're messing with the HTML simply for presentational purposes. Repeat the padding (or add to it) on the absolutely positioned element. The downside here is that you have to repeat the values in your CSS, which is brittle if you're writing the CSS directly. However, if you're using a pre-processing tool like SASS or LESS you can avoid that problem by using a variable. This is the method I personally use.

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

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

下面是CSS规范的相关部分:

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

最简单的方法——正如Winter的回答中建议的那样——是在绝对定位的div上使用padding: inherit。不过，只有当你不希望绝对定位的div有任何自己的额外填充时，它才有效。我认为最通用的解决方案(两个元素都可以有自己独立的填充)是:

Add an extra relatively positioned div (with no padding) around the absolutely positioned div. That new div will respect the padding of its parent, and the absolutely positioned div will then fill it. The downside, of course, is that you're messing with the HTML simply for presentational purposes. Repeat the padding (or add to it) on the absolutely positioned element. The downside here is that you have to repeat the values in your CSS, which is brittle if you're writing the CSS directly. However, if you're using a pre-processing tool like SASS or LESS you can avoid that problem by using a variable. This is the method I personally use.

1.)你不能在parent上使用大边框——以防你想要一个特定的边框 2.)你不能添加边距——如果你的父容器是其他容器的一部分，你想让你的父容器使用父容器的全宽度。

唯一适用的解决方案是将您的子容器包装在另一个容器中，以便您的父容器成为祖父容器，然后对新的子容器的Wrapper / parent应用填充。或者你可以直接给孩子们涂上填充物。

在你的情况下:

.css-sux{
  padding: 0px 10px 10px 10px;
}

在父div中使用边距而不是填充:http://blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html

可以用额外的Div级别轻松完成。

<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
  <div style="position: absolute; left: 0px; right: 0px; bottom: 10px; padding:0px 10px;">
    <div style="background-color: gray;">css sux</div>
  </div>
</div>

演示:https://jsfiddle.net/soxv3vr0/

好吧，这可能不是最优雅的解决方案(语义上)，但在某些情况下，它将没有任何缺点:在父元素上使用透明边框而不是填充。绝对定位的子元素将遵循边界，并且它将呈现完全相同的效果(除了您使用父元素的边界进行样式化)。