- HOME
- > BLOG CATEGORY
- 【CSS】positionで配置規則を指定し使い方を学ぼう!
- お知らせ
- NEW 2024.10.05 【CSS】画像を左右交互に配置について解説!
- お知らせ
- 2024.05.16 【CSS】グラデーション色々なパターンを解説!
- お知らせ
- 2024.05.15 【WordPress】親カテゴリーの子カテゴリー一覧を表示する方法
こんな方に読んでほしい
position
の使い方について学びたい方へ上の図のように、positionプロパティは、要素の位置を決めるために指定します。
位置を決める際にはtop、right、bottom、leftプロパティを組み合わせて使用します。
[記事の内容]
position
プロパティは、要素の位置を決めるために指定します。
static
は初期値になります。何も指定しない場合はこの値になります。
staticには他にも特徴があります。
基本、staticを指定することは、ほとんどありません。
ですが、レスポンシブデザインでpositionを解除をしたい場合に使用すると便利です。
/*--PC用--*/
要素 {position: 値;}
/*--スマホ用--*/
@media screen and (max-width:736px) {
要素 {position: static;}/*--positionを解除する--*/
}
relative
は相対位置を指定します、現在の位置が基準になります。
まずは相対位置を指定しない場合
相対位置を指定しない場合
子要素01
子要素02
子要素03
<div class="position__area">
<p class="child01">子要素01</p>
<p class="child02">子要素02</p>
<p class="child03">子要素02</p>
</div>
.position__area {
width: 100%;
background-color: #395848;
border: solid 3px #fff;
}
.child01 {
width: 20%;
padding: 10px;
background-color: #fd4e4f;
}
.child02 {
width: 20%;
padding: 10px;
background-color: #fec03f;
}
.child03 {
width: 30%;
padding: 10px;
background-color: #1bd64d;
}
当然relativeを指定していないため、子要素は縦に並ぶだけになります。
次に子要素に対してrelativeを指定してみます。
相対位置を指定した場合
子要素01
子要素02
子要素03
<div class="position__area">
<p class="child01">子要素01</p>
<p class="relative">子要素02</p>
<p class="child03">子要素03</p>
</div>
.position__area {/*--省略--*/}
.child01 {/*--省略--*/}
.child03 {/*--省略--*/}
.relative {
position: relative; /*--relativeを指定--*/
top: 10px; /*--上からの距離--*/
left: 10px; /*--左からの距離--*/
width: 20%;
padding: 10px;
background-color: #fec03f;
}
表示位置が基準になり、上から10px、左から10pxになっております。
また「子要素」と被らないように調整が必要になってきます。
ポイント01
relativeにつきましては、
①位置を指定できる。
②z-indexによる重なりの指定も可能になります。
absolute
は絶対位置を指定します、親要素の左上を基準にし位置を決めます。
absoluteは親要素を基準に、絶対的な位置を指定します。
absoluteを使う際は、親要素にrelative、fixedを指定する必要があります。
指定をしていない場合は、ウインドウ全体の左上が基準位置となってしまいます。
絶対位置を指定しない場合
子要素01
子要素02
子要素03
<div class="position__area_r">
<p class="child01">子要素01</p>
<p class="absolute">子要素02</p>
<p class="child03">子要素02</p>
</div>
.position__area_r {
width: 100%;
background-color: #395848;
border: solid 3px #fff;
position: relative; /*--親要素にrelativeを指定--*/
}
.child01 {/*--省略--*/}
.child03 {/*--省略--*/}
.absolute {
position: absolute; /*--absoluteを指定--*/
bottom: 0px; /*--下からの距離--*/
right: 0px; /*--右からの距離--*/
width: 30%;
padding: 10px;
background-color: #fec03f;
}
親要素にrelativeを指定しています。
左上を基準に下から0、右から0になっております。
今回は右下に配置をしてみましたが、「top: 0、left: 0」と指定した場合は左上に配置されます。
ポイント02
absoluteにつきましては、
①absoluteを使う際は、親要素にrelative、fixedを指定すること!
②z-indexによる重なりの指定も可能になります。
absoluteを使って、画像の上に「NEW」の画像を乗せてみます。
用意する画像
「NEW」画像を使用する際には、透過部分があるように作成してください。
画像の上に「NEW」の画像
<div class="thumbnail">
<img src="画像パス" alt="クマの画像">
<div class="new"><img src="画像パス" alt="NEW"></div>
</div>
.thumbnail {
position: relative; /*--親要素にrelativeを指定--*/
}
.thumbnail .new {
position: absolute; /*--absoluteを指定--*/
top: 0; /*--上からの距離--*/
left: 0; /*--左からの距離--*/
}
1親要素であるthumbnailに「position: relative」を
指定
2子要素であるnewにposition: absolute」を指定
3「top:0、left:0」に指定し左上に配置します
absoluteを使って、画像の上に「文字」を乗せてみます。
画像の上に「文字」
<div class="thumbnail">
<img src="画像パス" alt="クマの画像" width="200" height="200">
<div class="txt_area">クマの画像です</div>
</div>
.thumbnail {
position: relative; /*--親要素にrelativeを指定--*/
}
.thumbnail .txt_area {
position: absolute; /*--absoluteを指定--*/
bottom: 0; /*--下からの距離--*/
left: 0; /*--左からの距離--*/
/*--キャプションの装飾--*/
width: 200px;
padding: 10px;
box-sizing:border-box;
background-color: rgba(0, 0, 0, 0.8);
color:#fff;
text-align: center;
}
1親要素であるthumbnailに「position: relative」を
指定
2子要素であるtxt_areaにposition: absolute」を指定
3「bottom:0、left:0」に指定し左下に配置します
4CSSでキャプションの装飾して完成になります
fixed
は要素の位置を固定する際に使用します。
固定されるため、スクロールしても表示位置が変わりません。親要素に「relative」などを指定する必要は
ありません。
主に、メニューバー、サイドバーのお問い合わせバナーなど
fixedを使って、メニューバーを固定させてみます
<div class="fixed_area">固定したい要素</div>
<div class="area">
スクロールしてみよう↓
</div>
.fixed_area {
position:fixed; /*--fixedを指定--*/
top:0;
left: 0;
/*--固定要素の装飾--*/
width:100%;
padding:20px;
margin: 0;
box-sizing:border-box;
background-color: rgba(0, 0, 0, 0.5);
color:#fff;
text-align: center;
}
.area{
margin-top:150px;
padding-bottom:150px;
text-align: center;
color:#fff;
}
1固定したい要素に「position: fixed」を指定
2固定位置を「top:0、left:0」に指定し左上に配置します
3area要素が被ってしまうため、marginで調整
ポイント03
fixedにつきましては、
①fixedは固定したい要素に使用すること!
②z-indexによる重なりの指定も可能になります。
基本的な記述方法について解説しております。
今回はこれで以上です。
static
は位置を指定、z-indexを指定は適応されません。relative
は相対位置を指定します、現在の位置が基準になります。absolute
は絶対位置を指定します、親要素の左上を基準にし位置を決めます。absolute
を使う際は、親要素にrelative、fixedを指定する必要があります。fixed
は要素の位置を固定する際に使用します。2024.10.05
2024.05.15
2024.05.09
2024.05.09
2024.10.05
2024.05.15
2024.05.14
2024.05.09
2024.05.09
2024.05.09
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2024 shu-naka-blog