relative absoluteが突き破ることができない等級問題は第1/3ページ解決します。

前の時間は誰が群の中で一つ提出したのか覚えています。本当にみんなに理解できない問題です。 

<ul>   
<li>   </li>   
<li><span>   </span></li>   
<li>   </li>   
<li>   </li>   
<li>   </li>   
</ul> 

        もし私たちがLIをposition:relativeに設定したら。spanをpositionに設定:absolute;SPANのZ-indx値がどんなに高く設定されていても、いつまでも後ろの親の下にあります。 

*{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-indxの値は1000に達しています。position:absoutが設定されています。子級は全部父級の下にランクされました。長い間考えましたが、その根本的な問題は同じpositionを設置することです。同級ラベル間の等級はZ-indxでは超えられません。上記の例では最初のLIのレベルはいつまでも後のLIのレベルより小さいので、私達はLIのサブレベルにposition:absoluteを設置しました。非常に高いZ-indx値をあげました。         spanのLIに対してposition:relativeを設定すればいいと思います。いいじゃないですか？とても正確です。他のLIは全部position:relativeを設定しない場合；私たちが必要とするサブクラスはすべての内容に浮べます。しかし、実際には、すべてのLIの中にspanがあります。属性は同じです。どうすればいいですか？もちろん私たちは大会ではないです。このような効果が必要です。しかし、私たちはこのような効果が必要です。サブレベルは全部隠しています。マウスの反応がある時に現れて、すべての内容に浮かんでいます。私達は知っていて、これは確かに頭が痛いことです。私達の上で見たのは、サブクラスは表示する時に、次の親レベルのラベルの下に押さえつけられています。このマウスの反応の位置付け効果を実現します。 

<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;} 

1 2 3 次のページ 全文を読む