2

lite-javascriptの実行イメージギャラリーがあります。javascript<img>はリスト内の各要素を取得し、それを親<li>要素の背景として配置します。次に、CSSは、サムネイルを定義された高さ/幅の小さなブロックとしてスタイル設定します。<li>各オブジェクトのクリックイベントは、その子の<img>要素の可視性を切り替え、「アクティブな」クラス名をに追加し<li>ます。<img>CSSを使用して、親指ごとに同じ位置に表示されるように絶対に配置しようとしていますが、親指に対して移動しています。

CSSは次のとおりです。

#jgal li {
    background-position:50% 50%;
    background-repeat:no-repeat;
    border:solid #999 4px;
    cursor:pointer;
    display:block;
    float:left;
    height:60px;
    width:60px;
    margin-bottom:14px;
    margin-right:14px;
    opacity:0.5;
}

#jgal li img {
    position:absolute;
    top:0px;
    left:210px;
    display:none;
}

そしてサイト：http ：//www.erisdesigns.net

助けてくれてありがとう！

4

2 に答える 2

1

同じ位置にを表示したい場合<img>：

#jgal {
  list-style: none outside;
  margin-top: 30px;
  position: relative;
  width: 200px;
}

#jgal li {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border: 3px solid #999999;
  cursor: pointer;
  display: block;
  float: left;
  height: 60px;
  margin: 0 14px 14px 0;
  opacity: 0.75;
  position: static;   // Need to specify static since you have style li { position: relative; } inside another css file
  width: 60px;
}

#jgal li img {
  border: medium none;
  display: none;
  left: 300px;
  position: absolute;
  top: 0;
}

親指の近くに表示したい場合img-位置を変更します：静的; 位置に：相対; #jgalli{の場合

于 2010-06-09T09:12:44.537 に答える
0

position:absolute要素は、最も近い親要素に基づいて配置されます。position:relative

画像を の位置に相対的にしたい場合<li>は、 に を追加するだけposition:relative;です#jgal li。

に対して相対的に配置したい場合は、代わりにそこに#jgal適用し、がであることを確認します（どこかでオーバーライドしない限り、これがデフォルトです）position:relative#jgal liposition:static

于 2010-06-09T09:15:42.423 に答える