レイアウト＆css-セレクタ

<！DOCTYPE HTML>
<HTML>
<HEAD>
  <METAのcharset = "UTF-8">
  <タイトル> </ TITLE>
  <スタイル>
   .box1 {
    幅：200pxの;
    高さ：100pxに;
    位置：相対;
    国境：1pxの破線グリーン;
   }
   / *クラスセレクタを開始する位置して反対側の相対へのポイントは、絶対位置は、絶対的で
   、一般に、比較的親クラスのサブクラス絶対z屈折率は、* /の積層順序を示し
   .box2 {
    幅：100pxに、
    高さ：は50pxであり;
    位置：絶対;
    ボーダー：1ピクセル破線ブルー、
    背景色：赤;
    Zインデックス：-1;
    トップ：20ピクセル;
    左：20ピクセル;
   }
   P {
    位置：固定;
    トップ：20ピクセル、
    左：10pxの
   }
   .box3、.box4、.box5、.box6、.box7、.box8 {
    幅100ピクセル、
    高さは50px;
    フロート：左;
   }
   .box3、.box6 {
    背景色：赤;
   }
   .box4、.box7 {
    色背景：ゴールド;
   }
   .box5、.box8 {
    背景色：緑;
   }
   / *フローティングフロートを示します。ブロック浮動は、外枠の縁は、フローティングボックスまでのフレームまたは他を含むヒットするまで左または右に移動させてもよいです。
フローティング要素は、（標準オフ）標準から流れ、配置されています。
線幅内に配置されたフローティング要素が集合高くすることができます。
一列に配置されたフローティングブロック要素を表示することができます。* /
   / * P自体のビューポートブラウザの反対側に配置され、所定の位置に固定されたタグセレクタである* /
  </スタイル>
</ head>
<body>
  <DIV CLASS = "BOX1">
   <DIV CLASS = " BOX2「> </ div>
  </ div>
  <P> デフォルトのz-indexが0です。Zインデックス-1より低い優先度を有する</ P>
  <DIV CLASS = "BOX3">
            Iブロック要素。1
        </ div>
        <DIV CLASS = "box4">
            Iブロック要素2
        </ DIV>
        <DIV CLASS = "Box5">
            Iブロック要素3
        </ div>
        <スパンクラス= "BOX6"> Iインライン要素4 </ span>の
        <スパンクラス= "box7"> Iインライン要素5 </ span>の<！ -スパンは、素子の行を使用組み合わせです- - >
        <スパンクラス= "box8">私がいたインライン要素6 </ span>を
</ BODY>
</ HTML>

おすすめ