父元素负边距和子元素似乎协作

Question

您好

我有严重的问题，我需要在一个 div 中移动 div 中的 div，但它不起作用。 我的问题是，负边距或元素的子元素是否存在边距问题。

似乎负边距正在与子元素中的正边距折叠。

子元素的边距是移动的父元素。

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;
}

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

非常感谢您抽出宝贵时间

编辑： picture of what I want to achieve

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

Answer 1

我找到了一个相关的主题，它发生在所有市长浏览器中，并且有一个简单的解决方案。在 CSS 中必须使用overflow 属性...

我用过

overflow: auto;

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

Answer 2

根据您的评论以及我认为您的问题：

<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;
}

小提琴：

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