HTML-PositionプロパティとBlockについて
1.position属性-relative、absolute、fixed
🎈 Positionプロパティとは?
:
Positionは、cssで要素を任意の場所に配置するために使用します.
Positionは5種類からなる.
div {
position: relative;
position: absolute;
position: fixed;
position: sticky;
position: static;
}
position: static;はデフォルトです.静的にはtop,right,bottom,left値も変化しません
したがって、これらの値を与えて要素の位置を変えるために、
position: relative; 値段をあげればいいです.
relationを使用すると、relationが他の部分のレイアウトに影響を与えないため、他の要素とオーバーラップできます.
position: absolute;元素に最も近い祖先の位置は相対的に変化する.祖先/親要素がない場合はbody tagを基準とします.
position: fixed;ビューポート(すなわちスクリーン)を基準としており、そこには変化がないため、Webサイトの訪問者が下にスクロールしたり上にスクロールしたりしても、固定されたelementはフォローし続けます.
たとえば、現在のブログの場所で
上の要素は、スクロールしても下降しても固定された位置にあります.
固定位置が表示されます.
2.inline、inline-block、blockについて
Blockは線全体を占めている.例えば、div、pタグがあります.(もちろん、CSS属性でBlock lineをInline属性に変更できます.)
Inlineは、spanタグなどの複数のアプリケーションを1行にリストできます.(1つのラベルは1行を占めず、CSS属性でblock属性を適用することもできます!)
ではinline blockとは何ですか?
Inline-blockは行内とブロックを組み合わせて考える横展開しやすいブロックです.
divをinline blockに入れても内容が見えない場合がありますが、それはinlineに内容を書いてから見るので、divに内容を埋め込むと横列のdiv blockが見えます.
[Block、Inline、Inline-blockの画像例]
Reference
この問題について(HTML-PositionプロパティとBlockについて), 我々は、より多くの情報をここで見つけました https://velog.io/@peaceminusone/Positionテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol