Question

问候语

我有严重问题，我需要在div中将div移到div中，但它不起作用。我的问题是，如果不存在带边际问题的负边距或子元素的问题。

在子元素中，负边距似乎与正边距一起崩溃。

子元素的边距正在移动parrent元素。

我想要达到的目标是：

一个。文章div重叠主标题，我试图避免使用绝对位置，所以我去了负边距。

湾文本在文章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

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

Answer 1

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

我用过

overflow: auto;

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

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

FIDDLE：

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

Parrent元素负边距和子元素似乎合并

2 个答案: