0

position:relative;画像とテキストを指定して 1 つの画像の上にテキストを配置し、必要な場所にテキストを配置する方法を知ってposition:absolute;います。私の問題は、テキストを配置したい画像のリストがあることです。テキストを配置しようとすると、すべてのテキストが同じ位置になり、テキストが 1 つしか表示されないため、前述の解決策は機能しません。私はあなたが私の言いたいことを理解していると確信しています。CSSを使用するだけでこれを解決する方法はありますか?

編集:これは縦型のリストであり、すべての画像に同じleft. 編集2：テキストと画像はすでにコンテナに入っています！

ありがとう。

4

2 に答える 2

2

イメージとテキストをコンテナー (div) にネストする必要があります。次に、テキストを div に配置し、画像を div に配置します。これで問題が解決するはずです。

ここに私の実例があります:

http://jsfiddle.net/kqYcT/

.image_container{ position: relative; }

.image_container img{
   position: relative;
   width: 200px;
   height: 100px;
   z-index: 1;
 }

.text{
   position:absolute;
   top: 70px;
   left: 35px;
   color: white;
   z-index: 2;
  }
于 2013-05-10T17:21:03.960 に答える