【CSS】見出しに重ねるfeedアイコン

見出しの横に　feedアイコン　を配置することがよくありますが、どのように設置していますか？

そんなときは　position　プロパティ　を使用すると便利です。

positionプロパティ　で、何も位置指定していない本来の位置から、配置したいところへ移動させて表示します。

タイトルバーの上に、feedアイコンが重なっているイメージになりますね。

まず、HTML部分にこのように書きました。

----------------------------------------------

----------------------------------------------

feedアイコンを包む<p>タグに、 class="feed-icon"　とクラスを指定しました。

一方、CSSでは、このようにしました。

----------------------------------------------

h2 {
padding: 5px;
background-color: #666666;
　color: #FFFFFF;
　　}

.feed-icon {
position: relative;
　margin: 0;
　padding: 0;
　　}

----------------------------------------------

.feed-icon　に、　position: relative;　を指定。

アイコンの位置の基点をつくります。

その時点での表示はこのようになっています。

<h2>で指定したタイトルの下に、feedアイコンが配置されています。

そこで今度は、アイコンを配置したい位置へ移動させていきます。

CSSに追加しましょう。

----------------------------------------------

.feed-icon a {
position: absolute;
top: -45px;
left: 110px;
}

----------------------------------------------

<a>タグで囲まれているアイコンに対して、CSSを設定しました。

position: absolute;　を使用して、位置を指定していきます。

このようになりました。

アイコンの位置が移動し、タイトルバーに重なりました。

今回<h2>のタイトルはテキストで設置しましたが、画像でも利用可能なテクです。

数値を指定することで、アイコンの位置も簡単に移動できますので、結構便利ですよ。

今回の記述内容は以下のとおりです。

----------------------------------------------

<html>

<head>

<style>

h2 {
padding: 5px;
background-color: #666666;
color: #FFFFFF;
}

.feed-icon {
position: relative;
margin: 0;
padding: 0;
}

.feed-icon a {
position: absolute;
top: -45px;
left: 110px;
}

</style>

</head>

<body>

</body>

</html>

----------------------------------------------

Web仕事人の部屋