3

Foundation Orbitスライダーを使用しています。ページの特定のスライダーに css (キャプションを移動) を適用する必要があることを除いて、正常に動作しています。

次のセレクターを使用すると、変更が行われますが、問題はグローバルな変更だけです。

.orbit-wrapper .orbit-caption
{
    bottom:-30px;
}

コンテナー div の ID でさまざまなセレクターを試しましたが、適用されません。

#promotion .orbit-caption
{
    bottom:-30px;
}

ブラウザーで css 値を確認すると、正しい値が表示されますが、何らかの理由で要素に適用されません。上記の最初の例のようにセレクターを変更した場合にのみ、変更が行われます。

私は CSS の専門家ではありませんが、私が試したセレクターは通常の状況で機能します。

私は何を間違っていますか？

4

3 に答える 3

1

要素にposition: relative;があることを確認しましたか? ?

.orbit-wrapper .orbit-caption
{
    position: relative;
    bottom:-30px;
}

それまたは位置なし:絶対; 「下」プロパティは何もしません。

于 2012-10-11T16:22:46.000 に答える
0

さて、何が起こっているのかわかりました。Orbit は、caption 要素を元の orbit コンテナー (my div) の外側の要素にコピーします。元のキャプションを作成した場所に残していたため、最初からこれに気付かなかったので、デバッグしていました。

解決策は、別のラッパー要素を作成し、それをキャプションのセレクターとして使用することです。軌道スライダー div を含む id=promotion-wrapper で div を作成すると、次のように動作します。

#promotion-wrapper .orbit-caption
{
    bottom:-30px;
}
于 2012-10-11T17:35:27.150 に答える