フローティングボタンを親要素基準の右下で追従させるサンプルを紹介します。
cssで要素を固定して追従させるにはposition: fixed;を使うのですが、これだけでできると思ったのですができませんでした。jqueryを使うとjavascriptのコードを読み込むので若干ページの読み込みが重くなるのは残念ですが、おそらく親要素を基準にして右下で追従させるにはjavascriptを使わないと無理だと思います。
cssだけでは実装が不可能な理由
まず親要素の中に子要素を配置してこの子要素にposition: fixed;をあててみます。
#child{
position: fixed;
bottom: 0;
}親要素を基準に左下で固定するならこれだけでもよいですが親要素うを基準に右下によせたい場合はどうなるでしょうか？
#child{
position: fixed;
bottom: 0;
right: 0;
}これだと親要素の右端ではなくウインドウの右下に配置されてしまいます。
そもそも論の間違いとしてfixedは親要素を基準にするためのpositionプロパティの値ではありません。なのでbottom: 0;もright: 0;も親要素が基準になってないことを理解しておくべきです。これは実際に確かめるとわかりますが親要素基準にはなっていません。
では次にfloat: right;を使ったら右に寄せれるのでは？と思うかもしれません。
CSS positionを配置した親要素を起点にfixedさせるで紹介されているデモでは実際にfloat: right;とposition: fixed;を使って実際に右下に配置することに成功しています。しかしwidthが固定されているから成功するだけであり、レスポンシブのサイトで使えないなので実用性がありません。
とりあえず親要素の右に配置する
とりあえず親要素の右下に配置するcssを紹介します。
#parent{
width: 500px;
}
#child{
position: fixed;
bottom: 0;
margin-left: 500px;
}このコードはfloatではなくmargin-leftを使用しています。これで親要素の右下に固定されますが、注意点はbottom: 0;はあくまでもウインドウ基準です。親要素の下に配置されていてもそれはそうみえるだけでありfixedにおけるbottom:0;はウインドウ基準だということを忘れないでください。
さて、これで右下に配置できますがこれも結局はwidthが固定されているのでレスボンシブには対応できません。なので結局レスボンシブに対応させるにはjavascriptを使うしかないのです。
jqueryでフローティングボタンを親要素基準の右下で追従させる
html
htmlは以下です
<section>
<div id="parent">
<div id="child">
<button id="child_btn">
<span>btn</span>
</button>
</div>
</div>
<aside> side </aside>
</section>css
cssです。わかりやすくするためにflexをつかって2列にします。さきほどの見出しでmargin-leftを使いましたが、右側への配置はjqueryで実装します。
section{
display: flex;
}
#parent{
width: 70%;
}
aside{
width: 30%;
}
#child{
position: fixed;
bottom: 0;
}
#child_btn{
width: 40px;
height: 40px;
background: red;
}jquery
jqueryのコードはresizeを使用してレスボンシブに対応させます。
$(document).ready(function() {
// 初期位置の計算と設定
function setFixedPosition() {
var childElement = $('#child');
var childElementWidth = childElement.width();
var windowWidth = window.innerWidth; // ウィンドウの幅を取得
if (windowWidth <= 575) {
childElementMargin = $('#parent').innerWidth() - childElementWidth - 5;
} else {
childElementMargin = $('#parent').innerWidth() - childElementWidth - 10;
}
childElement.css('margin-left', childElementMargin + 'px');
}
setFixedPosition();
// ウィンドウのリサイズ時に位置を再計算
$(window).resize(function() {
setFixedPosition();
});
});$(‘#parent’).innerWidth()で親要素の幅を取得します。これに子要素の幅をマイナスしている理由は親要素の幅内に子要素をおさめるためです。resizeするごとに子要素のmargin-leftの値を更新します。
これでレスボンシブで親要素基準で子要素を右下に固定して追従させることができます。
で、何度もいいますが、fixedのbottom: 0;は親要素基準にはなってないということです。つまりこのやり方は疑似的に親要素の右下に固定させて追従させているということです。
コメント