TIL | CSS - Layout _position

5669 ワード
fixed CSS absolute position relative テキストリンク

Position


position - static


位置の既定値.
position: static ; この設定の要素は次のとおりです.
特定の場所が指定されていません.

position - relative


.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 500px;
}
上のcssコードについて

これは何の話ですか...
まず
位置:相対
単独で使用する場合、上記の「相対1」のように特定の位置に位置決めすることはできません.
ただ.
top: -20px;
left: 20px;
値を指定すると、[相対2](Relative 2)は初期値(static)ベースの赤いボックスに表示されます.

position - absolute


相対静的はpxである.そんなに行動したら.
post-absoluteは、post-absoluteを指定したタグの真上の親タグのpost-relativeに基づいています.
これは何の冗談ですか.
   <style>
	.relative{
            position: relative;
            background-color: green;
            border: 2px solid green;
            width: 600px;
            height: 600px;
            
        }
        
        .absolute{
            position: absolute;
            border: 2px solid yellow;
            background-color: yellow;
            width: 300px;
            height: 300px;
            top: 100px;
            left: 200px;
        }
    </style>
</head>
<body>
	<div>
    		<div class="relative">
        		<div class="absolute"></div>
    		</div>
	</div>
</body>

もう一度言ってください.
黄箱(.absolute)に設置されたtop:100 px;left: 200px;表示
白い背景から移動したわけではありません.
これは親ラベルの緑のボックスのposition-relativeを基準に移動します.
上の緑の箱の位置を変更しても
黄色い箱はまだ緑の箱を基準にしています
top: 100px; left: 200px;つまり維持です.

position - fixed


post-fixedはかなり強いです.
top、bottom、left、rightの値をください.
position:fixed; やるなら.
Webページをスクロールしても、指定した場所に移動しません.
親ラベルにposition:relation:があっても枠から飛び出して、自分の位置を堅持します.
また、position-bonfixedタグは、すべてのタグの上にあります.
position-固定タグに他のタグの内容を隠すのを避けるために、
対応するタグに適切なmargin値を与えるべきです.
04 IOC昇格
Bean後置プロセッサ-I n s t a n tiationAwareBeanPostProcessor#applyBeanPostProcessorsBeforeInstantiation