CSS位置属性
postion : [ ]
postionプロパティを使用すると、レイアウトまたはコントロールオブジェクトの場所を配置できます.position属性は親要素のpostion値を継承しません.position属性は、top、bottom、leftおよびright属性とともに使用して位置を設定することができる.(ただし静的は無視)1. position : static
positionのデフォルト値はstaticです.
top、bottom、left、right属性は無視され、一番上の左側にあります.2. position : relative
元の位置で相対的に位置を変える.
div {
color: white;
font-size: 20px;
width: 100px;
height: 100px;
}
.box1 {
background-color: pink;
}
.box2 {
background-color: skyblue;
position: relative;
top: 0;
left: 100px;
}
.box3 {
background-color: red;
}divで3つのボックスを作成した後、以下のCSSを適用した.position="relative"およびleft="100px"属性は、box 2を元の位置から左側100 pxの位置に配置する.
3. position : absolute
元の位置に関係なく、親要素に基づいて位置値が変更されます.
親要素に関連する要素がない場合、位置値は最上位、左側0、0の値に基づいて変更されます.
上図に示すように、hexcodeボックスを配置するには、
position='absolute'を与え、親要素corBoxにposition='relative'属性値を付与するだけでよい.<div class="colorBox">
<span class="hexCode">#709fb0</span>
</div>
.colorBox{
height: 370px;
border-radius: 10px;
background-color: #719fb0;
position: relative;
}
.hexCode{
color:white;
background-color: #578291;
font-size: 20px;
padding: 5px 12px;
position: absolute;
bottom: 10px;
}4. position : fixed
元の場所を考慮せずに、ブラウザ画面に基づいて場所を指定できます.
上位要因の影響を受けないため、画面を変えても一定の位置を設定できます.
<header>
<img src="https://www.apple.com/ac/globalnav/4/en_US/images/globalnav/apple/image_small.svg" alt="apple" width="20px" height="48px">
</header>
header{
position: fixed;
left: 0;
right: 0;
top: 0;
height: 48px;
background-color: rgba(45, 45, 45, 0.95);
}fixedを使用するとinlineプロパティになりますので、width, heightの値を指定する必要があります.Reference
この問題について(CSS位置属性), 我々は、より多くの情報をここで見つけました https://velog.io/@pumpkin/CSS-position-속성テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol