Question

我对编码和实践相对较新我正在重新创建其他网站的设计。我不知道如何放置称为“快速启动指令”的盒子（它位于猫的上方）。 https://jekyllrb.com/ 具体来说，我要问的是如何使元素在其父元素的下方和上方溢出。我无法从检查元素中找到（如果有人知道如何通过检查更有用的元素找到它！），但是现在我认为唯一可行的解决方案是使用绝对定位，这似乎非常麻烦和耗时。谢谢！

Answer 1

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

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

希望有所帮助！

Answer 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

中的工作链接

希望它对你有所帮助。酷！

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

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

如何实现溢出'技巧'？

3 个答案: