[Sass(SCSS)]position:absolute;をレスポンシブに対応させるためのMixin

仕様と表示例

以下のような画像があったとします。

背景の地図とピンの画像がそれぞれ別の画像で、レスポンシブルに対応させたい、つまり画面の幅が増減してもピンの位置は崩したくない、という場合に使えるMixinです。

Mixinを使うまでもなくmarginなどパーセント指定を使えば実現できます。
ただデザインデータからコーディングする際、上から何px、左から何pxとpx値で確認すると思います。
それを毎回%に計算し直すのが面倒だったので、いっそのことMixinにしてみました。

ピン画像にクリックイベントなどを施す場合でも、これならデバイスのウィンドウサイズを気にすることなく施すことができます。

コード

HTML

<div class="wrap">
   <p class="item-1"><img src="images/item-1.png" alt="ピン1"></p>
   <p class="item-2"><img src="images/item-2.png" alt="ピン2"></p>
   <p class="item-3"><img src="images/item-3.png" alt="ピン3"></p>

   <div class="background"><img src="images/map.png" alt="背景の地図"></div>
</div>

Sass(SCSS)

// Media Queriesのためのmixin
// 使い慣れているものでいいので、こちらを使う必要はありません。
@mixin media($media-type) {
   @if $media-type == mobile {
   	@media only screen and (max-width: 768px) {
   		@content;
   	}
   }
}

// ベースとなる横幅
$bace-width:600;

// ベースとなる縦幅
$bace-height:215; 

// 縦÷横
$h-pers:$bace-height / $bace-width;

// position指定のためのmixin
@mixin pos($left,$top) {
   left : ($left / $bace-width) * 100%;
   top: 0;
   margin-top:($top / $bace-height) * 100% * $h-pers;
}

// 包括する要素
.wrap {
   position: relative;
   width:$bace-width + px;
   height:$bace-height + px;

   // モバイルサイズの設定
   @include media(mobile) {
   	width:100%;
   }

   // position指定する要素の基本設定
   // z-indexは背景の地図画像より重なり順序を上にするために入れています
   p {
   	position: absolute;
   	z-index:2;
   }
}

// 位置を指定する要素
// ベースの縦横ピクセル数を基準にします。
// @include pos(左からのピクセル数,上からのピクセル数);
.item-1 {
   @include pos(130,65);
}

.item-2 {
   @include pos(250,130);
}

.item-3 {
   @include pos(465,90);
}

// 背景にしている画像
// .wrap(包括要素)の背景にしても良いのですが、heightを設定しないといけないのでレスポンシブルなページだと面倒です。
.background {
   position: absolute;
   top: 0;
   left: 0;
   z-index:1;
   width:100%;

   img {
   	display: block;
   	max-width:100%;
   	height:auto;
   }
}

アウトプットされたCSS

.wrap {
   position: relative;
   width: 600px;
   height: 215px;
}

@media only screen and (max-width: 768px) {
   .wrap {
   	width: 100%;
   }
}

.wrap p {
   position: absolute;
   z-index: 2;
}

.item-1 {
   left: 21.66667%;
   top: 0;
   margin-top: 10.83333%;
}

.item-2 {
   left: 41.66667%;
   top: 0;
   margin-top: 21.66667%;
}

.item-3 {
   left: 77.5%;
   top: 0;
   margin-top: 15.0%;
}

.background {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
   width: 100%;
}

.background img {
   display: block;
   max-width: 100%;
   height: auto;
}

以上です。

position:absolute; といいつつ、上からの位置指定はmarginを使っています。すみません。
positionだと包括要素(div class="wrap")のheight値に対して上から何％の位置と指定しなければなりませんが、今回の例ですとheightを絶対値で指定できないので、margin-topを使いました。
margin-topならwidth値を基準に％値が設定できるので、width:100%;を指定しているモバイルサイズでも意図した位置に設定できます。
レスポンシブルな場合にはmarginの方が使いやすいかと思います。