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

執筆者:

関連記事

no image

CliborとPythonで明日(昨日)の日付を出す

Clibor、使ってますか? 私は毎日使っています 例えば、「2018/07/02(月)」のように明日の日付を書きたいと思ったら、どうやって入力していますか? キーボードで13個以上のキーを押して、曜 …

no image

とおちゃん、またダメだったヨ

昨日、秋に受験した情報処理試験の結果が発表された。 「不合格」 がっくり。 自信があっただけに、がっくり。 一年に一度しかない試験を落としやがって、何やってんだ、俺は。 思えば、ひょっとして、答案用紙 …

no image

瞬NAS

月刊アスキー2005年6月号の記事に、NAS特集。 KNOPPIXを使う方法が述べられていた。 1.KNOPPIXでPCをブート 2.スタートボタン->KNOPPIX->Service->Start …

Windowsからたまに音が出なくなるのでタスクスケジューラを使った

会社でサーバ代わりにしているために起動しっぱなしにしているWindows7のLenovoのマシンで、度々(数日に一度)、音が出なくなる。 OSを再起動したら直る。 これまで、タスクスケジューラで2週間 …

no image

B2の送り状の印刷時に、どうしても3枚(無駄紙2枚)出てしまう。

クロネコヤマトのB2送り状ソフトを使っているのだが、標記の件で毎日いらいら。 今回、色々やって解決に至ったのでメモ。 やったこと: プリンタドライバの設定画面で、用紙サイズを変更したり、フィットページ …