positon relativeについて HTML復習③
こんにちは、HTML復習③です。
positon relativeについて勉強します。
relativeとは相対的なという意味で
relativeを使うと今記述している箇所を基準として、どの位置に配置するかを決めることができます。
今回もpタグを使ってpタグのrelative1クラスに設定していきます。
p.relative1{
position: relative;
top: 100px;
left: 60px;
background-color: lightblue;
width: 290px;
height: 250px;
padding: 20px;
}
top: 100px; 記述している箇所から下に100pxの位置に配置
left 60px; 記述している箇所から左に60pxの位置に配置
background-color: lightblue; pタグで囲まれた背景色をlightblueと指定
width: 290px; pタグで囲まれた領域の幅が290px
height: 250px; pタグで囲まれた領域の幅が250px
paddiing: 20px; 領域と文字との間の余白が20px
記事中には次のように記述します。
<p class="absolute1">
ここに記述された内容はここから下に100px,左に60pxの位置に記述され,背景色はlightblue,幅290px,高さ250pxの領域に記述されます。また領域と文字との間隔は20pxとなります。
</p>
するとこうなります。
（ここが基準位置）
ここに記述された内容は基準位置から下に100px,左に60pxの位置に記述され,背景色はlightblue,幅290px,高さ250pxの領域に記述されます。また領域と文字との間隔は20pxとなります。
♯HTMLタグ
♯CSS
