2

画像の上に要素が配置されているレイアウトに問題があります。<h1>状況により HTML を編集できないため、<h1>要素を画像の下に配置するにはどうすればよいですか?

私のコードは次のようになります。

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

しかし、基本的に、リンクでは、画像のすぐ下に移動したい「Razer Press Release」テキストが表示されます。方法がわかりません！

4

2 に答える 2

2

CSS を使用して、2 つの要素の垂直位置を交換します。

<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;
}
于 2012-10-05T01:04:39.440 に答える
0

あなたの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 */
}
于 2012-10-05T01:48:10.687 に答える