Question

我遇到了my layout的问题，我在图片上方有一个<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 */
}

如何将<h1>元素放在图像下面？</h1>

2 个答案: