如何向相对 div 溢出父级添加边距以向下移动内容

Posted 2023-03-04

【中文标题】如何向相对 div 溢出父级添加边距以向下移动内容

【英文标题】：How to Add Margin to Relative Div Overflowing Parent to Move Content Down

【发布时间】：2019-07-29 15:42:00

【问题描述】：

我创建了一个与其父级重叠的 div，并且 div 之后的边距未按预期运行。我预计 div 后面的内容会出现在 上面的div 之后，但事实并非如此。

预期行为：

expected_image

现实：

reality

---

这是代码：

HTML：

<div>
  <div class="hero">
    <div class="heading">
      <h1>Greg Potts' Website</h1>
      <h4>
        Software Developer / Vim-er / Bash-er
      </h4>
    </div>
  </div>
  <p>Some content next</p>
</div>

CSS：

.hero 
  height: 20vh;
  width: 100%;
  background: #272c33;

.heading 
  position: relative;
  top: calc(15vh);
  width: 50%;
  padding: 30px;
  margin: auto; /* horizontally center */
  background: white;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  border-radius: 3px;

.heading h1, h2, h3, h4, h5, h6  text-align: center; 

我怀疑它与 clearfix 有关，但尝试了一些解决方案，但都没有按预期工作。

谢谢。

【参考方案1】：

为了实现这一点，我会重组 html 元素，因为如果使用你的集合结构，如果不添加空白 clearfix 元素就无法完成。

相反，从.hero 元素中取消嵌套.heading 并为top css 属性使用负值会非常简单。

您还可以将.hero 和.heading 元素包装在一个容器中，以适应因top 值为负数而导致的左下边距。

代码如下所示：

HTML

<div>
    <div class="hero-container">
        <div class="hero"></div>
        <div class="heading">
            <h1>Greg Potts' Website</h1>
            <h4>
                Software Developer / Vim-er / Bash-er
            </h4>
        </div>
    </div>

    <p>Some content next</p>
</div>

CSS

.hero 
    height: 20vh;
    width: 100%;
    background: #272c33;

.heading 
    position: relative;
    top: calc(-10vh);
    width: 50%;
    padding: 30px;
    margin: auto; /* horizontally center */
    background: white;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    border-radius: 3px;

.hero-container 
    margin-bottom: calc(-10vh);

.heading h1, h2, h3, h4, h5, h6  text-align: center; 

【讨论】：

像魅力一样工作！谢谢！ Благодарам！