20

マークアップの例:

<div class="wrapper">
    <h2>Trigger</h2>
    <div>This is some content</div>
</div>
<div class="wrapper">
    <h2>Trigger</h2>
    <div>This is some content</div>
</div>
<div class="wrapper">
    <h2>Trigger</h2>
    <div>This is some content</div>
</div>

CSS の例:

.wrapper {z-index: 1}
.wrapper div {display: none; position: absolute;}

javascript (jQuery) を使用して、各 h2 にクリック イベントをアタッチし、コンテンツ div を display: ブロックに切り替えます。

その意図は、これらがページ上の他のものと重なる展開可能なコンテンツのブロックであることです。

キャッチは、最初のものを 2 番目のものとオーバーラップさせたいということです。これは、すべてが開いている場合に 3 番目のものとオーバーラップします。

ただし、それぞれが前のものの後にレンダリングされるため、実際のスタック順序は逆になります (最後に作成されたコンテンツ div は、以前に作成された sup をオーバーレイします)。

CSS/HTML でこの動作を逆転させる巧妙な方法はありますか? または、ページをレンダリングしてから、javascript を使用して、すべてのコンテンツ div を順番に取得し、それぞれに z-index を逆順で与えるソリューションですか?

アップデート：

より具体的なマークアップを次に示します。

<div style="padding: 10px;">Hello World
    <div style="position: relative; top: -5px;">
        <div style="position: absolute; background: yellow;"><p>This</p><p>is</p><p>overlapping</p></div>
    </div>
</div>
<div style="padding: 10px;">Hello World
    <div style="position: relative; top: -5px;">
        <div style="position: absolute; background: orange;"><p>This</p><p>is</p><p>overlapping</p></div>
    </div>
</div>
<div style="padding: 10px;">Hello World
    <div style="position: relative; top: -5px;">
        <div style="position: absolute; background: red;"><p>This</p><p>is</p><p>overlapping</p></div>
    </div>
</div>

次のマークアップは 3 つの div を生成し、それぞれに色付きの div が重なっています。レンダリングの順序により、最後に絶対配置された DIV (赤) は、その前の DIV (オレンジ) の上に配置されます。

最初の色付きの重複する div を一番上にするために適用する必要がある z-index のタイプがわかりません。Z インデックスに関する上から下への順序は、マークアップを反映する必要があります (上が黄色、下が赤)。

もちろん、これは標準の逆です。

このポストディスプレイを修正するために JavaScript を使用しても構わないと思っていますが、JavaScript を介して適用する必要がある正確な CSS にまだ苦労しています。私がやっていることは実行可能ですか？

4

4 に答える 4

15

私の回避策は100％ハックですが、他の誰かがこのページに来たら、うまくいきました！

#nav ul li:nth-child(1) {
        z-index:10; 
    }
    #nav ul li:nth-child(2) {   
        z-index:9;  
    }
    #nav ul li:nth-child(3) {
        z-index:8;  
    }
    #nav ul li:nth-child(4) {   
        z-index:7;  
    }
    #nav ul li:nth-child(5) {
        z-index:6;  
    }
    #nav ul li:nth-child(6) {   
        z-index:5;  
    }

私はちょうどそれを持っていて、10要素を超えない限り、うまくいくようです...

于 2011-08-11T22:20:06.173 に答える
14

トップアンサーのSASS関数は次のとおりです。

@for $i from 1 through 10 {
   &:nth-child(#{$i}) {
     z-index: #{10 - $i};
   }
}
于 2016-04-13T21:14:20.953 に答える
9

Shiny の新しい CSS flexbox テクノロジにより、これが少し簡単になりますが、実際のコンテンツが逆になるという欠点があります。これは大きな問題である必要はありません。意味的に奇妙です。

要するに、これらのスタイルでコンテナ内のすべてをラップします。

display: flex;
flex-direction: column-reverse;

実際の例については、フィドルを参照してください (wrapper要素にカーソルを合わせると、アクションが表示されます)。

コンテンツを更新するたびに z-index を動的にチェックするために JavaScript に依存したくない場合に便利です。要素がオンザフライで挿入される場合(または特定のスタイルを事前に設定できないその他の理由)、例の CSS ルールは、 s を逆の順序で<div class="wrapper">挿入する場合に z-index を処理するのに十分なはずです。<div>

これが現在の設定です: http://jsfiddle.net/dJc8N/2/

これは、同じ HTML に CSS を追加したものです (<h2>タグ内の数字に注意してください): http://jsfiddle.net/Mjp7S/1/

編集：

私が投稿した CSS は、おそらくまだコピー＆ペーストする準備ができていません。ただし、これは次のとおりです。

display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: column-reverse;
-moz-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
-o-flex-direction: column-reverse;
flex-direction: column-reverse;
于 2013-01-15T21:38:36.843 に答える