父元素负边距和 child 元素似乎是合作的

Question

问候

我有严重的问题，我需要将 div 移动到 div 中，但它不起作用。我的问题是，如果负边距或 child 元素的边距问题不会出现问题。

child 元素中的负边距似乎正在与正边距崩溃。

child 元素的边距正在移动父元素。

here is fiddle 我的问题。

我想实现的是：

一个。文章div与主标题重叠，我尽量避免使用绝对位置，所以我选择了负边距。

b。文章 div 内的文本被加了边距。从顶部开始。

<div class="container">
    <div class="main-heading"><h1>Main Heading</h1></div>
    <div class="wraper">
        <div class="article">
            <div class="text"><p>Text</p></div>
        </div>
    </div>
</div>

这里还有一些问题 css:

div {
    width: 100%;
}
.container {
}
.heading {
}
.wraper {
    margin-top: -100px;
    height: 500px;
}
.article {
    margin-top: 0;
    height: 200px;
}
.text {
    margin-top: 120px;
    height: 50px;
}

正如我所说，文本元素的边距似乎也将文章元素从顶部移开。是我还是问题出在哪里，解决方案或工作方法是什么？最好即使没有绝对位置，但如果你真的需要使用它们，别担心，但要以某种方式清除它，这样它就可以用作列的一部分并且不会与 upper/bottom 内容交互。

非常感谢您的宝贵时间

编辑： picture of what I want to achieve

那个黑色矩形是包装纸，猫是文章文字是文字，但页边距现在移动了整篇文章。

Answer 1

根据您的评论和我认为您要问的内容：

<div class="image">
  <p>PRESTO</p>
</div>

.image {
  display:block;
  position:relative;
  background-color:grey;
  width:300px;
  height:200px;
}
p {
  display:none;
  position:absolute;
  top:0;
  width:100%;
  text-align:center;
  color:orange;
  font-size:2em;
}
.image:hover > p {
  display:block;
}

FIDDLE:

https://jsfiddle.net/su5aqs3p/2/

Answer 2

我找到了一个与此相关的主题，它出现在所有主要浏览器中，并且有一个简单的解决方案。在 CSS...

中必须使用 overflow 属性

我用了

overflow: auto;

在父元素上，它起作用了。

父元素负边距和 child 元素似乎是合作的

Parrent element negative margin and child element seems to collabs

html

css

margin