css : ) layout/position : ~

3765 ワード
TIL CSS html テキストリンク

position : ~

postionプロパティは、Webドキュメント内の要素の位置を配置するプロパティです.
静的以外の属性値は、要素がどの位置top、right、bottom、left、staticに配置されるかを指定できます.

position : static


デフォルトはpositionのデフォルトです.topプロパティは、場所を指定するのではなく、HTMLドキュメントに基づいて場所を決定します.(一般的にはこれがデフォルトなのであまり使いにくいです.)
属性は、right、bottom、leftおよびrelativeと同じではありません.

position : relative

top相対的に、新しい場所を指定できます.right、bottom、left、positionは、属性値を入力することによって元の位置に対して要素を移動させることができる.relativeをtopまたはleftなどの新しい場所として指定しない場合は、デフォルトで表示されている場所と同じです.
.wrap {
  display: inline-block;
  width: 100px; height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;  left: 20px;
  background: blue;
}

position : absolute

absoluteこの要素の位置は、指定された親要素に基づいて決定される.
この要素は,最も近い位置にある相対的な属性を持つ親を基準に移動する.
.wrap {
  display: inline-block;
  width: 100px;  height: 100px;
  background: red;
  color: white;
}

#two {
  position: absolute;
  top: 20px; left: 20px;
  background: blue;
}

position値がない場合は、Bodyを基準とします.

Position: fixed

fixed要素は他の要因の影響を受けない.
view-portに対して固定位置.したがって、ページをスクロールしても、その位置を保つことができます.
MediaWikiデータをkyotocabinetでバックアップ
python import