IT仕事

CSSで、はまった(画像の重なり・relative/absolute)

投稿日:2014年4月21日 更新日:

トラブル:トップページに配置した「ネットでの購入はこちら」ボタンが、ウィンドウの大きさに合わせて移動してしまう。

横長が狭い画面だと右の位置にあるが、広い画面だと真ん中に来る。CSSを見ると、positionはabsoluteになっていた。

しかしpositionをrelativeにすると、もともとの位置に空白が空く(heightで指定した数値分)。

topやleftでボタンの位置はどこにでも動かせるが、この空白を消す方法が無い。

位置の起点がコンテナではなく、画面の左端になっているようだったので、それを手がかりに対処方法を探った。(3時間かかった)

対処:ボタンのpositionをabsoluteにするだけではダメで、親要素である#containerにposition: relative;を設定すると、OKだった。
重なりの、下に来るものがrelativeで上に来るものがabsoluteにするとよいみたい。

(以下、参考リンクと引用)

ITポテチ : position:absoluteで親要素を基点にする

いままでposition:absoluteとすると、常にブラウザウィンドウの一番左上を基点とするものと思い込んでいたのですが、どうやらそうでもないみたいです。

ボックスの配置と基準:スタイルシート(CSS)辞典 – HTMLタグボード

「position:absolute;」とすると、ボックスは2つの条件により動作します。1つめの条件は「position」プロパティを指定した要素を含む親要素にも「position」プロパティが指定され、かつその値に「relative/absolute/fixed」のいずれかの値が指定されていた場合です。このときは、その親要素の左上が基準となります。

-IT仕事

執筆者:

関連記事

Synctoyがない!けど見つけた!

毎日定期スケジュールで、とあるフォルダの同期作業を行っている。そのファイルサーバNAS/Qnapの、HBS3 Hybrid Backup Sync でエラーが起こった。 QNAPのヘルプセンターに問い …

ShopifyからChatworkへ通知(JSON)

Arigato Automtion(Shopify)から、PowerAutomateへの、JSONデータの渡し方について、需要あるかもと思い、書いてみる。 自分がやっていた以前のやり方(これだと日本語 …

秀丸の正規表現で置換

秀丸で文字の前後を入れ替えたい

秀丸で、文字の前後を入れ替え(置き換え)たいとしたときに、結構手間取ったので、メモ。 やりたいこと。 例えば、 「Tシャツ《無地》5枚 カラー:グリーン サイズ:フリー 」を 「Tシャツ《無地》5枚 …

no image

サーマルレシートプリンタ ZJ-POS58

POSレジの試験用に買った「サーマルレシートプリンタ ZJ-POS58」。 Amazonで9980円送料込み。安い。 Excelからプリントしてみたが、日本語も文字化けせずにちゃんとプリントされた。 …

no image

Q.NASに対してPCからアクセスしようとすると、毎回ユーザーIDとパスワードの入力を求められる

A. 1.ユーザーIDとパスワードを入力するとともに、その下の「保存」にチェックする 2.「コントロールパネル」の「ユーザーアカウント」にある「ネットワークパスワードの管理」から、ユーザー名とパスワー …