相対絶対突破できないレベル問題の解決_体験交流

li をposition:relativeに設定し、span をposition:absoluteに設定すると、span の z-index 値がどれほど高く設定されていても、常にその背後にある親よりも下になることがわかります。

少し前、グループ内で誰が本当に理解できなかった質問をしたのか覚えています。

<ul>   
<li>第一块</li>   
<li><span>第二块</span></li>   
<li>第三块</li>   
<li>第四块</li>   
<li>第五块</li>   
</ul>

li をposition:relative に設定すると、スパンをpositionに設定します:すると、span の z-index 値がどれほど高く設定されても、その値は常にその背後にある親よりも下になることがわかります。

*{margin:0; padding:0; list-style:none;}   
li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left; position:relative; z-index:1;}   
li span {width:200px; height:100px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;}

試してみると、子を見つけるのは簡単です。z-index 値は 1000 に達し、position:absolut に設定されます。子はすべて親の下にファイルされます。長い間考えましたが、根本的な問題は、同じ位置を設定すること (相対/絶対)、同じレベルのラベル間のレベルを z-index で超えることはできない、ということだと思います。上の例では、最初の li のレベルは常に次の li のレベルよりも小さいため、li の子にposition:absolute; を設定し、非常に高い z-index 値を与えます。

おそらく、あなたはそれについて考えるでしょう。position: relative を設定している限り、次のようになります。とても正しいです。他の li がposition:relative; を設定していない場合、必要な子はすべてのコンテンツの上にフローティングできます。しかし、実際に、すべての li でスパンが必要で、すべてのプロパティが同じである必要がある場合はどうなるでしょうか?もちろん、この効果は必ずしも必要というわけではありません。ただし、そのような効果が必要です。すべての子が非表示になり、マウスの反応があるときに表示され、すべてのコンテンツの上に浮かび上がります。上で見たように、子は表示されるときに次の親ラベルの下に押し付けられるため、これは確かに頭の痛い問題であることを知っておく必要があります。このマウス応答の位置決め効果を実装しましょう:

<ul>   
<li><a href="" title=""><span>第一块</span></a></li>   
<li><a href="" title=""><span>第二块</span></a></li>   
<li><a href="" title=""><span>第三块</span></a></li>   
<li><a href="" title=""><span>第四块</span></a></li>   
<li><a href="" title=""><span>第五块</span></a></li>   
</ul>

リンクされたマウス イベントを通じてこの表示/非表示効果を完成させます:

*{margin:0; padding:0; list-style:none;}   
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}   
li a {position:relative; z-index:1; display:block; height:100px; width:100px; background:#000;}   
li a:hover {background:#000000;}   
li span {display:none;}   
li a:hover span {display:block; background:#c00; width:200px; height:200px; position:absolute; top:0; left:100px; z-index:1000;}

このように a を position:relative に設定しますの場合、その子は親の左上隅を座標原点として配置されます。次に、スパンの特定の形状と位置プロパティを設定して、それを非表示にします。次に、a の pseudo-class:hover を使用して、span をアクティブにします。結果を見ると、一番上にあるはずのものがすべて一番下にあることがわかります。では、この問題をどうやって解決すればよいでしょうか? 実際のところ、css で強制的に突破することは不可能なので、トリガーされていない親タグには、position:relative; 属性を持たせないようにできないか考えますが、トリガーされていない親タグには、position:relative; 属性を持たせないようにすることができます。トリガーされますか? この親にそのような値を割り当てますか?実際、これを考えると基本的にすべての問題を解決できます。

*{margin:0; padding:0; list-style:none;}   
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}   
li a {display:block; height:100px; width:100px; background:#000;}   
li a:hover {position:relative; z-index:1; }   
li span {display:none;}   
li a:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }

a:hover の属性をposition:relative; に設定するだけで、マウスがトリガーされたときにのみ a に相対位置属性が割り当てられます。これで、他の親タグによってブロックされる問題は解決されました。

もちろん、ie5 などのブラウザを気にしない場合は、コードを簡略化することもできます:

<ul>   
<li><span>第一块</span></li>   
<li><span>第二块</span></li>   
<li><span>第三块</span></li>   
<li><span>第四块</span></li>   
<li><span>第五块</span></li>   
</ul>

css は次のように変更できます:

*{margin:0; padding:0; list-style:none;}   
li {height:100px; margin:0 5px 0 0; float:left; width:100px; background:#000;}   
li:hover {position:relative; z-index:1;}   
li span {display:none;}   
li:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }

追記：
少し前に公開した「ポジション：相対・絶対ではレベルを突破できない」という記事で、ポジショニングにおけるレベルについて書かれていましたが、ここ数日読み返してみたら、次のような記事でした。徹底されておらず、重要なポイントを指摘していませんでした。したがって、位置レベルをより明確かつ明確に説明できることを期待して、ここで特別に補足させていただきます。

位置には 4 つの異なる値、つまり静的 | 絶対 | 固定 | 相対があることは誰もが知っています。これについては、su yu の「css2 中国語マニュアル」で説明されています: 静的: 特別な位置決めはせず、オブジェクトは html の位置決め規則に従います; 絶対: オブジェクトをドキュメント フローの外にドラッグし、左、右、上、下およびその他の属性を使用して絶対的な位置にします位置。そして、そのカスケードは z-index 属性によって定義されます。現時点では、オブジェクトにはマージンはありませんが、パディングと境界線はまだあります。相対: オブジェクトは積み重ねることはできませんが、左、右、上、下などの属性に基づいて通常のドキュメント フロー内でオフセットされます。 .; 修正: ie5.5 および ns6 はまだ利用できません このプロパティはサポートされていません。

ただし、オブジェクトの積み重ね位置を変更するには、別の css プロパティ、z-index が必要です。ただし、この z-index は万能ではなく、html コード レベルによって制限されます。 z-index は、同じレベルの html にのみその効果を反映できます。ここで述べておく必要があるのは、z-index はオブジェクトの位置値が相対/絶対である場合にのみ使用できるということです。以下に、レベルの特性を説明するためにいくつかの例を示します:

<p id="box_1">   
<p id="a">这是第一个块</p>   
<p id="b">这是第二个块</p>   
</p>

上記の html コードの場合、それを定義する css を記述する必要もあります:

#a,#b {position:absolute; width:300px; height:100px; }   
#a {z-index:10; left:0; top:0; background:#000; }   
#b {z-index:1; left:20px; top:20px; background:#c00; }

これが最も重要です。 common この場合、#a と #b のスタッキング レベルは z-index を通じて設定できます。これは問われていないので、どのような状況で問題が発生するのでしょうか？別の例を見てみましょう:

<p id="box_1">   
<p id="a">这是第一个块</p>   
</p>   
<p id="box_2">   
<p id="b">这是第二个块</p>   
</p>

この構造に基づいて別の css を作成します。この css 内のさまざまな場所に注意してください:

#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}   
#a, #b {position:absolute; width:100px; height:300px; }   
#a {background:#c00; z-index:100; }   
#b {background:#0c0; z-index:1; left:50px;}

現時点では、#a に関係なく、はどんなに大きな値を設定しても #b を超えることはできないので、z-index は html のレベルを突破することができません。同じレベルでなければ力を発揮できません。では、この問題を解決するにはどうすればよいでしょうか?逆に考えてもいいのですが、いとこ同士の順序は整理できないのであれば、親のレベルを整理したらどうでしょうか? そこで、#box_1 と z-index の css に z-index: 100; を追加します。 : 1; #box_2 の css に追加します。効果をもう一度見てみましょう:

#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}   
#box_1 {z-index:100;}   
#box_2 {z-index:1;}   
#a, #b {position:absolute; width:100px; height:300px; }   
#a {background:#c00; }   
#b {background:#0c0; left:50px;}