CGI 5:ディスプレイと位置決め

codecademyのCSSコースのディスプレイとポジショニングレッスンから学んだこと.
CSSなしのサイトのための

は、ブラウザーがちょうど左から右まで、そして、一番上から底まで要素を与えます.CSSを使用すると、あなたがそれらを好きな場所の要素を配置することができます.

位置特性
開始する

では、プロパティの位置、表示、Z - index、float、およびclearでこれを行うことができます.

その位置プロパティを変更することで要素位置を変更できます.この例では、ボックス要素をボックスの完全な幅で作成するブロックレベルの要素( box )を示しています.

位置プロパティの4つの可能な値があります.これらは次のとおりです.

静的な(これはデフォルト値です、そして、ちょうどそれが左にあるということを意味して、したがって、それは実際に指定される必要はありません)

相対

の絶対

は

を修正しました

相対

.question {
  text-align: center;
  position: relative;
  top: 40px;
}

位置プロパティの相対値を選択すると、静的であれば、その要素の最上部、下部、左、右の動きを指定できます.

記憶に重要な

Top -要素を下に移動します.

bottom -要素を移動します.

left -要素を右に移動します.

right -要素を左に移動します.

絶対

要素の位置がページ上の他のすべての要素に絶対的にセットされると、それを無視し、そこにないように動作します.要素は、最も近い位置に置かれた親要素に対して配置されます.

固定

固定される要素の位置を設定すると、ページ上に設定されている場合は、ユーザーがスクロールするときに移動しません.これはしばしばNavbarに使用されます.

Z指数

は、基本的に、どの要素が他の上にあるかについて、Z - indexプロパティを使用することができます

Z - Indexは静的要素では動作しません.したがって、位置を相対的に設定する必要があります(絶対値または固定値ですか?)

は、あなたがZインデックスを設定する整数を大きくします.したがって、z - index 2の要素はz - indexが1である要素と重なります.

.box-bottom {
  background-color: DeepSkyBlue;
  position: absolute;
  top: 20px;
  left: 50px;
  z-index: 1;
}

表示プロパティ

HTML要素は歴史的に“ブロックレベル”要素または“インライン”要素として分類されました.インライン要素は、要素を定義しているタグで囲まれたスペースだけを占有するものです(したがって、行全体を占有しません).

ページは、これをよく説明します.

いくつかの要素に対するデフォルトの表示はインラインであるので、彼らはとても小さなスペースを取って、他の人とラインを共有することができます.

displayプロパティには三つの値があります.

インライン(要素は全部の行を取らないで、他の要素、例えば、タグのリンクで行内でレンダリングします)

ブロック(要素は、全体の水平線、例えばpタグを取ります)Mozilla Inline elements

インラインブロック(インライン・ブロック・ディスプレイ)はインラインとブロック要素の両方の特徴を結合します.インライン・ブロック・エレメントはお互いに隣接して表示され、幅と高さのプロパティを使用してその寸法を指定できます.

.rectangle {
  display: inline-block;
  width: 200px;
  height: 300px;
}

インラインブロックディスプレイを使用して、Nagbar要素を他方の上の1つではなくNavbar要素を横に置く例を示しました.

List of block elements
フロート

フロートは、単にそれが行くことができる限りはるかに左または右として要素を移動することができます.

静的と相対的な位置の要素のために動作します.

floatされた要素は、指定された幅を指定しなければなりません、それはその含んでいる要素の全幅を仮定します、そして、したがって、float値を変えることはあまり変わりません.

.box-bottom {
  background-color: DeepSkyBlue;
  float: right;
}

クリア
時々、Floatプロパティを使用すると、他の要素が互いに衝突し、奇妙に見えます!

あなたは、要素が互いに衝突するとき、どのように振る舞うべきかを指定するために、clearを使用できます.

クリアプロパティは次の値を取ることができます.

left -要素の左側は、同じ要素内の他の要素には触れません.

right -右側の要素は、同じ要素内の他の要素には触れません.

両方とも、要素のどちらの側も同じ含有要素の範囲内のいかなる他の要素にも触れない.

none -要素はどちらの側にも触れることができます.

div {
  width: 200px;
  float: left;
}

div.special {
  clear: left;
}

それはすべてのディスプレイと位置決めのためです!最後にページ上の要素を移動する方法を最終的に理解してうれしいです.しばらくの間、実際にそれについて疑問に思っていました!