Position & Display

Position

{position: A;}Webページの要素のプロパティを配置する方法を決定します.

static ← default value

relative

absolute

fixed

sticky

Position: Relative

{position: relative;}前の要素との自然な接続による位置決め
配置位置に基づいて相対位置を指定できる属性(static).
次のプロパティを使用して配置

top

bottom

left

right

.green-box {
  background-color: green;
  position: relative;
  top: 50px;
  left: 120px;
}

→default規格に基づくbluebox、top: 50px、left: 120px

Position: Absolute

{position: absolute;}必要な場所の指定
ドキュメントフローに関係なく(要素が垂直に配置されているか水平に配置されているかを決定します)left、right、top、bottom、position: relative;の属性値を使用して要素の属性を配置します.
もし両親の中に相対的で、固定的で、絶対的な位置があれば、彼らの両親に対して絶対的な移動をします.
通常、absoluteを使用すると、標準となる親にtopが与えられます.
次のプロパティを使用して配置

bottom

left

right

top: 300px

.skyblue-box {
  background-color: skyblue;
  position: absolute;
  top: 300px;
  left: 0px;
}

→他の文書に関係なくleft: 0px、{position: fixed;}

Position: Fixed

position:relative指定した場所にナビゲート
absoluteプロパティ値と同様に、ドキュメントの流れを考慮せずに座標を使用して位置を決定します.
ただし、ブラウザウィンドウが最も近い親または親でない場合(top)、
したがって、ブラウザウィンドウでスクロールしてもフリーズは維持されます(基点:ブラウザの左上隅)
次のプロパティを使用して配置

bottom

left

right

top: 0px

.title {
  position: fixed;
  top: 0px;
  left: 0px;
}

→スクロールもleft: 0px、{display: A;}に固定

Display

inlineすべてのHTML要素にはdefault displayプロパティがあり、ページ上の要素がどのように表示されるか、他の要素とどのように配置されるかを決定します.

block

inline-block

{display: inline;}

Display: Inline

inline inlineプロパティを指定改行せずに1行に他のエンティティと並べて配置inlineの利点は、1行を超えると自動的に次の行に表示され、任意のディスプレイから出力できることです.
[代表的な<span>エリオット]

<a>

<em>

<strong>

<h1><strong>Welcome</strong>to our survey!</h1>

h1 {
  color: #466995;
  font-family: 'Oswald', sans-serif;
  font-size: 32px;
  font-weight: 300;
  text-transform: uppercase;
}

→inlineタグはinline別名の1つであり、WELCOMEは{display: block;}のように1行出力

Display: Block

block height属性には前後の改行があり、他のエンティティを別の行にプッシュし、独自に1行を占有します.widthおよび<div>プロパティの使用
[代表的な積み木装飾]

<p>

<h1>

<h2> , <h3> , ..

...

<footer>
  <h3> Thanks for taking our survey! </h3>
</footer>

→blockタグは{display: inline-block} ELINMENTの1つであり、他のELINMENTとは異なる行に出力することは何の措置も取らない

Display: Inline-Block

inline基本的には、inlineのレイヤーのように、1行で改行せずに他のレイヤーと並んで並べます.
ただし、widthおよびheightの属性、およびmarginおよびpaddingの属性の上下の間隔を指定することができる.inline-blockレイヤーを使用して、各オブジェクトを並べて表示します.

<div class="rectangle">
  <p>I’m a rectangle!</p>
</div>

<div class="rectangle">
  <p>So am I!</p>
</div>

<div class="rectangle">
  <p>Me three!</p>
</div>

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

→各blockをinlineとしてリストする

Float

{float: A;}次の要素に要素を浮かべる(float)プロパティ
元のWebページに画像とテキストを配置する方法のプロパティについて.
オブジェクトを右から左にオフセットするためのアトリビュートです.
floatプロパティを使用する場合は、widthを指定する必要があります.
(簡単に言えば、私がどれだけの空間を与えたかでどれだけの空間を占有し、次の要素が来るときはfloat属性を取り除くだけでいい)
(現在はflexの属性に置き換えられており、一般的ではありません)
次のプロパティの使用

left

right

none

.green-section {
  width: 50%;
  height: 150px;
}

.orange-section {
  background-color: orange;
  width: 50%;
  float: right;
}

Take Away

場所と表示について

codecademyによってstickyの属性を学び、IE環境では正常に駆動できない.この属性の効用性を再考すべきである.

float属性は、flex属性およびgrid属性に置き換えられる傾向がある.
個人用ページ分割画面を作成する際にgridプロパティを適用したことがありますが、学習のためにコードコメントを再開する必要があります.

リファレンス

https://homzzang.com/b/css-108

https://www.codecademy.com/learn/learn-css

https://learnlayout.com/float.html