[TIL] #7 Position

2501 ワード
CSS 以上のコードpreCourse position TIL html テキストリンク
position
  • htmlコードに関係なく
    次に、要素
    • を任意の位置で描画することができる.
  • は複雑なレイアウトを作成できます.
  • 値:static、relative、absolute、fixed

    • relative

    position: relative;自体は特に意味がありません.
    どこにも移動しないし、固定しないからです.
    移動するには、top、right、bottom、leftのプロパティの値が必要です.
    これはposition属性付与のみ適用されます
    css
.relative {
  position: relative;
}
.top-20 {
  top: -20px;
  left: 30px;
}
    div.relativeは、第1のdivと同じであるが、position: relativeの属性を有する.top-20この属性に追加の位置調整が追加されました!!

    absolute & fixed


    👆🏻 Junsikメンターに質問した結果、今本当にposition属性の概念がわかりました!! ターゲットタグの特定の場所を指定します。 完全に固定したい場合は、位置:固定;属性をくれればいいのに しかし、親またはブラウザ全体に基づいて位置決めしたい場合は? absolute position: absolute; 値は親ラベルを基準として位置を決定します。 親ラベルの位置:相対; :配置するターゲットの親ラベルに基づいて位置を指定します。 :親への絶対的な行動! 親ラベルまたは親ラベルにはpositionプロパティがありません。 :親ラベルのCSSプロパティのチェックを続行 :位置ラベルの値が指定されていません <body>タグに基づいて位置を指定 p { margin: 0; background-color: yellow; } .absolute { position: absolute; } .right-0 { right: 0; bottom: 0; } blockプロパティのpタグはinlineプロパティを持つ要素として処理できます。 absoluteプロパティを持っている場合は、要素のサイズのみが使用されます。 値が0(例えばright、bottom)の場合、その位置から0に下がることを示します。 体にぴったり合うように見えます! どのような標準で位置決めしますか:相対的です;ぜったい書いてあるかどうかはわかりませんが 👉🏻 左、右などの位置調整を簡単に行う場合は、デフォルトの位置プロパティを指定する相対値が与えられます。 👉🏻 位置を指定したい場合はposition:absolute;と位置:固定;使用を選択します。 完全に固定されていない以上、位置:相対;与えるべきだ。 親要素にposition属性を持つ要素がない場合 最終的にはHTMLの最上位ラベル<body>ラベルを基準に絶対位置を決定します。 指導者に聞いたことがありますが、それ以外はdisplay:flex;、display: grid; よく使う。 これを整理してから! fixed positionがabsoluteまたはfixedの場合、位置は周囲の要素とは無関係になります。 この領域は無意味になり,他の要素と重なる. この場合。 bodyラベル自体にはpadding、padding-topまたは ヘッダー、固定するオブジェクト(Oㅖを取る場合はtopボタン...)外部の要素にmargingrify-topを1つあげればいいです
    djangoからDBを一度にインポート/エクスポート
    Type Scriptベースの整理