親要素の右下に配置する(css)

 問い合わせフォームへのリンクを全ページの右下に配置しました。

 css を使って右下に配置します、次のような html で右下に配置できます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8″>
<title>サンプル</title>
<style>
.etc {
position: relative;
width: 200px;
background-color: #ffc0cb;
padding: 0 5px 1.5em 5px;
}
.contact {
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="etc">
親要素の右下にリンクを表示するサンプルです。
<div class="contact"><a href="https://…">問い合わせ</a></div>
</div>
</body>
</html>

 親要素に css の position 属性を relative に設定し、右下に配置したい要素の position 属性 を absolute に設定します。position が absolute の場合、位置の指定が必要です。右から 0 下から 0 の位置とう言うことで right 属性、bottom 属性に 0 を設定します。

 このままでは、要素が重なり合う可能性があるので、親要素の下側に、余白をつけるため、padding 属性を設定しています。padding で4 つの値を指定すると、上、右、下、左の余白になります。単位の px はピクセルです。em は1文字のサイズを表します。1.5em なら、1 文字半の余白となります。

 ブラウザで開けば、次のようになります。

親要素の右下に配置する

web サイト

Posted by sirius