css - 我怎么能把我的

Question

我的布局有问题，我有一个<h1>元素位于图像上方。情况使我无法编辑 HTML，那么如何将<h1>元素定位在图像下方？

我的代码如下所示：

<h1>Razer Press Release</h1>
<img src="/images/trongamingkeyboard.jpg" />

但基本上，在链接中，您可以看到我想直接移动到图像下方的“Razer Press Release”文本。我就是不知道怎么办！

Answer 1

使用 CSS 交换两个元素的垂直位置。

<h1 style="position: relative; top: 500px;">Razer Press Release</h1>
<img style="position: relative; top: -18px;" src="/images/trongamingkeyboard.jpg" />

如果您不能使用内联样式（这是最简单的），这些选择器将起作用，给定该页面中的标记：

#cta > h1:first-child {
    position: relative;
    top: 500px;
}

#cta > h1:first-child + div > img {
    position: relative;
    top: -18px;
}

Answer 2

你的 HTML

<section id="cta">
  <h1>Razer Press Release</h1>
  <div>
    <img alt="Photograph of the new Tron Gaming Keyboard by Razer" src="images/tron-keyboard-main.jpg">
  </div>
</section>

我的 CSS

#cta {
  position: relative;
  z-index: 0;
}

#cta h1{
  position: absolute;
  z-index: 100;
  top: 20px; /* your placement */
  left: 20px; /* your placement */
}