这个溢出“技巧”是如何实现的？答案

【问题标题】：How is this overflow 'trick' achieved?这个溢出“技巧”是如何实现的？
【发布时间】：2016-03-01 06:03:18
【问题描述】：

我对编码比较陌生，为了练习，我正在重新创建其他网站的设计。我不知道如何放置名为“快速入门说明”的框（它在猫的上方）。 https://jekyllrb.com/ 具体来说，我要问的是如何使元素在其父元素的下方和上方溢出。我无法通过检查元素找到答案（如果有人知道如何通过检查元素来找到它会更有帮助！），但现在我认为唯一可行的解决方案是使用绝对定位，这似乎非常麻烦和耗时。谢谢！

【问题讨论】：

澄清一下，我想用html和css来做这个

标签： html css overflow positioning

【解决方案1】：

您在检查元素时走在了正确的轨道上。这是使用负边距值完成的。如果你继续挖掘，你会看到这段代码：

@media (min-width: 768px)
.quickstart .code {
    font-size: 18px;
    margin: -30px 0;
    float: right;
}

希望有帮助！

【讨论】：

【解决方案2】：

看到这个例子链接，你可能会理解溢出的概念。

<div class="container">
   <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like.</span>
</div>

jsfiddle中的工作链接

希望对您有所帮助。酷！

【讨论】：

注意：这是一个溢出示例：仅在垂直方向可见，即父对象的顶部和底部。同样的方法，我们也可以对其余的边做。

【解决方案3】：

你有这个元素：

   <div class="unit golden-large code">
      <p class="title">Quick-start Instructions</p>
      <div class="shell">
        <p class="line">
          ...
        </p>
        <p class="line">
         ...
        </p>
        <p class="line">
          ...
        </p>
        <p class="line">
          ...
        </p>
        <p class="line">
          ...
        </p>
      </div>
    </div>

还有这种风格：

.quickstart .code {
  font-size: 18px;
  margin: -30px 0;
  float: right;
}

元素的高度由内容设置（高于他的容器），负边距允许您将元素放在他的容器之外。

【讨论】：