IE6/7 で絶対配置された要素が不可解に消えたりブロックされたりする問題を解決する方法

1. 絶対配置レイヤーの隣接フローティングレイヤーの幅が親レイヤーの幅と等しくなく、フロートがクリアされていない場合、IE6/7 と FF で表示が一貫しています。
2. 絶対配置レイヤーの隣接するフローティングレイヤーの幅が親レイヤーの幅と等しくない場合、フロートがクリアされると、IE6/7 では絶対配置レイヤーが表示されませんが、FF では表示されます。
3. 絶対配置レイヤーの隣接フローティングレイヤーの幅が親レイヤーの幅と等しく、フローティングがクリアされていない場合、IE6 では絶対配置レイヤーが表示されませんが、IE7/FF では表示されます。
4. 絶対配置レイヤーの隣接フローティングレイヤーの幅が親レイヤーの幅と等しい場合、フロートがクリアされると、IE6/7 では絶対配置レイヤーが表示されませんが、FF では表示されます。

このバグの解決方法は非常に簡単です。絶対配置レイヤーがフローティングレイヤーの隣に配置されていないことを確認するだけです。絶対配置要素と他の要素の間に空の div を追加するという、さらに簡単な方法もあります。
絶対配置された要素が不思議に消えてブロックされる現象を見てみましょう。まず、関連するいくつかの配置機能を理解しましょう。
1. 相対的に配置された要素のデフォルトの z-index 値は 0 です。
2. 相対配置が 2 つ同時に出現した場合、後のコードの z-index が優先されます。
3. 子は親によって設定された z-index に従います。子が絶対位置と z-index を設定すると、親を突破して表示できます。次のコードを参照してください。

コードをコピー

コードは次のとおりです。

コードの説明: 上には 3 つの隣接する相対配置レイヤーがあります。最初のレイヤーに対して絶対配置のレイヤーが追加されます。理論上、この絶対配置要素は 3 つの相対配置要素の上にあります。ただし、実際には表示されません。 z-index 値を設定しても効果はありません。
インターネット上のこのバグの解決策は、一般的に、ハックを使用して B を負の値にして、IE での B のレベルを下げることです。ただし、この方法では、z-index が負の場合に新しい IE バグが発生します。配置の特性に応じて、この IE バグを回避できます。
表面的には、下のレイヤーが絶対配置された上のレイヤーを覆っています。実際、下のレイヤーは絶対配置された親レイヤーを覆っています。親レイヤーの z-index を、その後ろのレイヤーの z-index よりも大きく設定するだけで済みます。

<<: CSS で中空マスクレイヤーを実装するサンプルコード

>>: MySQLサブクエリでorder byが効かない問題の解決方法