1

オブジェクトと CSS でスタイル設定された<img>2 つのオブジェクトを使用して、CSS で「ミーム」に見えるキャプション付き画像を作成しようとしています。<p>現在、と の 2 つ<div>を含む があります。私がやりたいことは、画像をdivの左上隅に配置し、次に-1に設定し、2つのpオブジェクトを画像の上に配置しますが、divの左上隅を基準にして配置します.<img><p>z-index

これは、p オブジェクトの値top: yとleft: x値を、div の左上、ひいては画像に対して相対的に配置されるように設定できるようにするためです。

しかしposition: relative、p オブジェクトを設定しようとすると、最初の p が正しく配置されているが、2 番目の p が最初の p に対して相対的に配置されているため、実際top: 0, left: 0よりも低い位置にあるにもかかわらず、問題が発生します。

どうすればこれを修正できますか?

4

3 に答える 3

4

このjsfiddleをチェックしてください：

http://jsfiddle.net/56J8y/1/

関連するCSS

.meme_container {
 position: relative;   
}
.meme_container .top_meme {
    position:absolute;
    top:0;
    left:0;
}
.meme_container .bottom_meme {
    position:absolute;
    bottom:0;
    left:0;
}

</ p>

とhtml

<div class="meme_container">
<img src="https://www.google.com/images/srpr/logo3w.png"/>
<p class="top_meme">This is a caption 1</p>
<p class="bottom_meme">This is a caption 2</p>
</div>​
于 2012-04-25T23:44:24.967 に答える
1

1 つの方法は、次のような疑似要素を使用することです:after。:before

例：

img:after {
   content: "Hello, I am the caption";
}
于 2012-04-25T23:33:00.953 に答える
0

私はあなたがこの状況について話していると思います：

<div>
  <img />
  <p class="first">caption1</p>
  <p class="second">caption2</p>
</div>

次に、必要な操作を行うために、divの位置を何かに設定する必要があります（相対的なものは一般に動作に影響を与えないため、適切な選択です）。それが完了すると、絶対位置を内部で使用できます。絶対は次に高い位置にある要素を指します!!

div{position:relative};
p{position:absolute};
p.first{top:10px};
p.second{top:20px};
于 2012-04-25T23:45:08.437 に答える