Conten:"20",zoom:1およびz-index:1への理解

3038 ワード

1、Conten:”\20”
.clear:after{ content:”\20; Display:block; Height:0; Clear:both; }

Content:’\20’;という意味です.clearという要素の後ろにスペースを付けて、20を020に変更してもいいです.このCSSはブラウザに区切り欄を作成し、上下DIVを隔ててDIVがずれないようにします.しかし、clear:bothを単純に使用すると、ブラウザ互換性のバグが発生し、content:"20"を使用すると、DIVの後ろにスペースを人工的に追加することで、このようなブラウザ互換性の問題を解決することができます.
2、zoom:1
IEブラウザの固有属性であり、FFなど他のブラウザではサポートされていません.オブジェクトのスケールを設定または取得できます.それ以外に、IEのhasLayout属性をトリガしたり、フローティングをクリアしたり、marginのオーバーラップをクリアしたりするなど、他の小さな役割があります.しかし、残念ながらW 3 C検証には通じません.
3、 z-index: 1
コンセプト:
z-indexプロパティは、要素のスタック順序を設定します.数値が大きいほど上に表示されます.位置決め要素のみで効率的(例えばabsolute,relative,fixed)divA,divB,divA-1,divB-1を例に挙げることができる(コード順はdivAが上,divBが下,divAはdivA-1のサブレイヤ,divB-1はdivBのサブレイヤ,divA,divBは同級である)
階層関係の比較:
  • 兄弟要素の場合、divBはデフォルト(positive:static)でdivAを上書きします.
  • 同級要素に対してpositionがstaticでなくz-indexが存在する場合、z-indexの大きい要素はz-indexの小さい要素をカバーし、すなわちz-indexが大きいほど優先度が高くなる.
  • IE 6/7でpositionがstaticではなく、z-indexが存在しない場合z-indexは0であり、それ以外のブラウザz-indexはautoである.
  • z-indexはautoの要素であり、階層関係の比較には関与しない.

  • 位置決め規則:
    positionがrelative(相対位置決め)に設定されている場合、absolute(絶対位置決め)またはfixed(固定位置決め)は、positionプロパティが設定されていないノードまたはプロパティ値がstaticのノードを上書きし、前者が後者のデフォルトレベルよりも高いことを示します.z‐index属性干渉がない場合,より複雑な構造を作ることができる.ここではdivAもdivBもpositionは設定しませんが、divAのサブノードdivA-1にposition:relativeを設定します.順序規則に従って、divBはdivAを上書きし、divA-1はdivBを上書きします.
    デフォルトのルール
    すべてのノードがposition:relativeを定義する場合.z-indexが1以上のノードは、z-indexを定義していないノードを上書きします.z-indexの値が負のノードは、z-indexを定義していないノードによって上書きされます.
    親ルールから
    divAノード、divBノードがposition:relativeを定義し、divAノードのz-indexがdivBノードより大きい場合、divA-1は必ずdivB-1を上書きします.すべてのノードがposition:relativeを定義している場合、divAノードのz-indexはdivBノードと同じ大きさですが、順序規則のためdivBはdivAの前に上書きされます.divA-1のz-index値がdivB-1より大きくても、divB-1はdivA-1の前に上書きされます.多くの人がz-indexを大きく設定したり、9999とか、親ノードの影響を考慮しなければ、大きく設定しても無駄です.
    Javascriptの運用
    javascriptを使用して要素にz-index属性を動的に追加する場合は、その構文は他のほとんどのCSS要素と同様にアクセスできます.CSS属性のハイフンの代わりに「アルパカ命名法」を使用します.次のコードで示すように.
    var myElement=document.getElementById(“ID”) ;
    myElement.style.position=”relative”;
    myElement.style.zIndex=”9999;