Html 如何阻止h1标记更改列的位置

我一直在寻找这个问题的答案，但我在任何地方都找不到解决办法。我只是想把h1标记移到图标的上方，但每当我使用页边空白或填充顶部来移动h1时，它也会将列向下移动。我在周围所有的柱子上都画上了边框，看看这些边框是否相互接触，但这没有帮助。h1或列周围是否有某种默认填充，而您看不到

以下是指向我的代码笔的链接：

HTML:

---

给出

h1

标签

位置：绝对

然后用

left:200px

将其向左移动（用您想要的任何数字替换200）

---

使用

边距

、

填充

或

位置：相对

时，它会移动其他元素的原因是，它们被视为页面“流”的一部分，这意味着它们将与其他元素交互并碰撞<代码>位置：绝对，将目标元素从页面流中移除，从而允许您将其放置在任何位置，而无需移动其他元素。

如果我正确理解您想要的内容（并非真正100%清楚），您可以将

position:relative

应用于该标记，并使用

top

向下移动它，而不影响任何其他内容，因为

position:relative

加上位置设置会导致元素相对于其原始（静态）位置移动，但如果是：

h1.whatwedo {
  position: relative;
  top:30px;
}

---

更改代码笔：

当人们投票否决时，如果用户注意到原因，这将对用户有所帮助。您的

标记似乎已经直接位于图标上方（带有一点垂直空间）；标题和图标都与左键对齐。能否将您的问题更新为showcase a（包括框架），明确说明所需的输出应该是什么？看起来您正在使用引导，但即使包括引导，我也无法复制您的问题。如果您将代码放在类似JSFIDLE的东西中，这样我们就可以轻松查看和修改它，这会很有帮助。我把它放在codepen中，我的错。希望它能更好地展示出来。这正是我想要做的。谢谢，我只是不知道如何正确解释。顺便说一句：另一种方法是更改该

h1

的页边距：顶部页边距越大，底部页边距越小，但为此，您必须先检查默认页边距。

.maincon2 {
    width: 100%;
    height: 500px;
    background: #424242;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    border: 1px solid orange;
}

.topicons {
    border: 1px solid red;
    margin-top: 70px;
    height: 250px;
    table-layout: fixed;
}

h1.whatwedo {
  position: relative;
  top:30px;
}