こんにちは、フローです。
今回は、CSSのpositionを使った例を書いて行きたいと思います。
目次
relativeとabsoluteを使った簡単な例
以下に、position: relativeとposition: absoluteを使った簡単なHTMLとCSSの例を示します。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Relative and Absolute Positioning Sample</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="relative-container">
<div class="parent">
親要素
<div class="child">
子要素
</div>
</div>
</div>
</body>
</html>CSS
.relative-container {
margin: 40px;
}
.parent {
position: relative;
width: 200px;
height: 200px;
background-color: #f00;
color: #fff;
padding: 20px;
font-size: 16px;
}
.child {
position: absolute;
top: 50px;
right: -20px;
width: 100px;
height: 100px;
background-color: #00f;
color: #fff;
padding: 10px;
font-size: 14px;
}この例では、
<div class=”parent”>が
position: relativeを使って親要素に設定され、
<div class=”child”>が
position: absoluteを使って子要素に設定されています。
これにより、子要素の位置は親要素を基準にして設定されます。
子要素は、
親要素の上から50px、
右から-20px（つまり親要素の右端から20pxはみ出した位置）に配置されています。
このように、
position: relativeとposition: absoluteを組み合わせることで、
要素の相対的な位置を効果的に制御することができます。
CSS説明
各要素の説明を詳しく書いていきたいと思います。
.relative-container
margin: 40px; – 上下左右の外側の余白を40pxに設定します。
.parent
position: relative; – 親要素の位置を相対位置に設定します。
これにより、子要素が絶対位置で配置される場合、親要素を基準にした位置が使われます。
width: 200px; – 親要素の幅を200pxに設定します。
height: 200px; – 親要素の高さを200pxに設定します。
background-color: #f00; – 親要素の背景色を赤色に設定します。
color: #fff; – 親要素内のテキスト色を白色に設定します。
padding: 20px; – 親要素内の余白
（要素の境界線とその中の内容の間のスペース）を20pxに設定します。
font-size: 16px; – 親要素内のフォントサイズを16pxに設定します。
.child
position: absolute; – 子要素の位置を絶対位置に設定します。
これにより、
親要素（position:relativeが設定されている）を基準にした位置が使われます。
top: 50px; – 子要素の上端を親要素の上端から50px下に設定します。
right: -20px; – 子要素の右端を親要素の右端から-20px
（つまり、親要素の右端から20pxはみ出した位置）に設定します。
width: 100px; – 子要素の幅を100pxに設定します。
height: 100px; – 子要素の高さを100pxに設定します。
background-color: #00f; – 子要素の背景色を青色に設定します。
color: #fff; – 子要素内のテキスト色を白色に設定します。
padding: 10px; – 子要素内の余白
（要素の境界線とその中の内容の間のスペース）を10pxに設定します。
font-size: 14px; – 子要素内のフォントサイズを14pxに設定します。
まとめ
以上が、relativeとabsoluteを使った簡単な例として書いてみました。
この要素も、ほぼセットで使う事が多いので、是非覚えて使えるようになりましょう。
数値を変えたりしてどう変わるか色々試して下さい。
レッツチャレンジ！
最近のコメント