CSS，DIV与位置：绝对重叠<p>文本

Question

所以我被告知（也许这是错的），如果你想覆盖（超越）父div的边缘，只需让孩子的位置：绝对。这个问题是它将重叠在div下面设置的文本。

有办法吗？

1. 覆盖父div的边距并使该div仍然按下相邻文本？
2. 这可以通过不对第一个文本块应用margin-top来执行吗？这个解决方案似乎很草率，在移动视图中布局会爆炸。

感谢您对此提供的帮助/意见。

可以找到相关网页here。

Answer 1

很少有人帮助你解决这个问题：

这不是父母，而是第一个定位的祖先（位置不是null，可以是“相对的”）。

您可以相对于此祖先的百分比定义此元素的大小。

您可以使用填充而不是边距来保留空间。

Answer 2

删除div的图像背景，其位置为绝对位置，并使用以下选择器将图像作为父div的背景：

.entry-content {
    padding: 0 40px 40px;
    background: url('http://www.gridviper.com/phelan/wp-content/uploads/back-blue-top4.jpg') no-repeat;
    background-size: 100% 219px;
}

并将绝对div css更改为：

 .content-masthead {
    max-width: 100%;
    min-height: 219px;
    position: relative;
    left: 0;
    right: 0;
    margin-left: 0px;
    padding-left: 0px;
}