最近お仕事で今更ながらpositionをちゃんと使おうと思って使ってみました！
今まで必要な場面が特に無かったのですが、positionを使ってみての感想と自分なりのポイントまとめ。
一回、記事が全部消えたけれど頑張って書き直しました！！
positionプロパティの値と使い方
positionは要素の配置を指定するプロパティです。
値にはstatic、absolute、relative、fixedがあり、top、right、bottom、leftのプロパティで配置場所を指定します。
- static
- 初期値（通常の配置になります）
- absolute
- 絶対配置
通常、親ボックスの左上を基準に配置場所を指定します。 - relative
- 相対配置
本来の配置場所を基準に配置場所を指定します。 - fixed
- 固定配置
親ボックスの左上を基準に配置場所を指定します。ページをスクロールしても固定表示がされます。
z-indexプロパティを使って重ね順を指定しよう！
z-indexプロパティは重ね順を指定するもので、通常だと上に書いた要素は下に、下に書いた要素は上に表示されます。
なので！今回positionを使ったページでは下の画像のように先に書いた要素のロゴ部分は重なった下部分が隠れてしまうんですね。
こうではなくて、下の画像のようにロゴを上に表示させたい！
ということでz-indexの登場です。
z-indexは数値が低いものが下に表示され、数値の高いものが上に表示されます。
.logo {
z-index: 2;
}
.topimg{
z-index: 1;
}
こんな風にz-indexで指定をすれば、ロゴを上に表示することができます☆
はじめてpositionタグを使ってページを作ってみた！
positionを使った部分は下の画像で赤く囲った部分。ロゴ、メニュー、トップ画像の部分になります。
今回は全てposition: relative;を使って作りました。何とかデザイン通りに出来ましたが、positionの使い方はこれで合っているのやら？？
他にも良い方法があるかも知れないので、日々勉強ですね！
0 件のコメント:
コメントを投稿