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

シャトル

今日で閉店。 WindowsXPが発売された年にオープンしたから、2001年末ごろだったかな。 10年たって店じまい。 お客さんが少なかった。というより、富山の中心商店街の歩行者が少ないので、仕方ない …

no image

EC-CUBEをXAMPPを使ってローカルインストールした

表記の情報がWebにあまりなかったので、誰かの参考になるかと思い、記しておく。 ■XAMPPをインストール ごく、普通に。 ■データベースの作成 XAMPPのPHPMyAdminで、eccubeなどと …

no image

会社のサイトを常時SSL化

会社のショッピングサイト2つのうち、1つを常時SSL化の作業に着手。 まずは、こちらのサイトを参考に、.htaccessを修正。301リダイレクトになるパターンがいいみたい。 httpからhttpsに …

no image

バッファローのNASでトラブル

会社のファイルサーバが満腹になってきたので、新しいのを買った。 バッファローの、LS-WSX1.0TL/R1。 早速、こんなメールをバッファローのサポートに送ることになった。 — ほとんど …

ここ数日Google Apps Script を触っていてわかったこと

・セル操作については、思ったよりも色々できる。 ・実行速度は遅い。 ・Googleアカウントを持っている人に配布する/共有するには、とても便利。 ・スクリプトを使った画像の配置もできる(ただし画像それ …