html - HTMLでテキストを前面に表示する方法

Question

写真がテキストに重なっているウェブサイトがありますが、その逆が必要です。

<p>my text</p>
<img href="picture.jpg">

両方とも同じ場所にあるので、画像はまだ一番上にあります。2行のコードの順序を入れ替えるだけで疲れましたが、何もしませんでした

score 4 · Accepted Answer

relative positionを使用してラッパーを作成し、div absolute positionを指定できます。

.wrapper div {
    position: absolute;
}

さらに読むには：

score 3 · Accepted Answer

score 3 · Accepted Answer

css を追加して、テキストの z インデックスを画像よりも大きく設定します

HTML

<p id="text">my text</p>
<img id="image" src="picture.jpg">

CSS

#text{
    z-index: 1;
}

#image{
    z-index: -1;
}

z-index を有効にするには、両方の要素を配置する必要があることに注意してください。position:absolute、position:relative、または position:fixed を使用します

編集: Rahul は、元のコードが src の代わりに href を使用していることを正しく指摘しました。src がベタープラクティスとして更新されました

score 0 · Accepted Answer

CSSにz-index: 100;afterを追加できます。position: fixed;

srcの代わりに画像に使用してみてくださいhref

5 に答える 5