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仕事

執筆者:

関連記事

Amazonへ出品している商品の、商品名だけを一括で変更したいときの手順

1.以下のページを参考に、出品レポートをダウンロード。商品名を一括で変更・編集する方法 – Amazon出品サービス / 出品に関する一般的な質問 – Amazonセラーフォー …

no image

ExcelWebAddin でWebフォームを自動入力

たまーーに、おじさんの不動産物件の入力をボランティアでお手伝している。 電話オーダーが多く、また前回メールで問い合わせたもんだけど・・・という方が結構多い。ありがたいことである。 その際、見積システム …

no image

フォトショップで画像の周囲に枠線を書くやり方

自分のための備忘録。 1.新規レイヤーを作成し、全てを範囲選択(Ctrl+A) 2.選択範囲- 選択範囲を変更- 境界線 で、1px。 3.選択範囲- 選択範囲を変更- 滑らかに で、1px。 4.編 …

no image

GWも出勤をしている企業戦士とはオレのことだ

出勤はしていても、「仕事はしない、勉強をする」と決めた今日は、 http://www.moug.net/tech/exvba/ のサイトで学習三昧。今度この手の仕事があるから。 関数関連のテクニックま …

PhotoshopElementsでWebデザイナーが作ったようなキレイなボタンを作るには

PSPについては、 思わず押してみたくなる、いとも簡単なボタンの作り方 | 楽してプロっぽいデザイン | Forty-N-FiveBlog など、Web上にいろいろ解説があるけども、Elementsに …