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

Fold Page List と Fold Category List

今度仕事でWordPressを使うのでいろいろ調べている。 WordPressはデフォルトで親メニューも子メニューも出っ放し。 けど、メインメニューだけ出していてクリックしたときだけサブメニューを出し …

no image

クロネコヤマトの送り状発行ソフトB2で請求先に赤エラーが出てにっちもさっちも

タイトルの通り。数時間悩んだが、結果、何とか分かった。 このブログを見ている諸君は、きっと同じ悩みを抱えてきたのでは? ご請求先顧客コード(たいていは自社の電話番号になっていると思う)と、運賃管理番号 …

no image

pptでWeb画像を作図する

pptでマトリックス図などを作図して画像データ化してWebに貼り付けってことをよくやる。 そのときの、こつ、を備忘録。 ・pptから画像ファイル形式で保存するときはJPEGではなくPNGで保存すべき。 …

no image

PhotoshopElementsで枠線を書くには

方法が長らくわからなかったが、今日わかったので書いておく。 図形ツールで図形を描く ラスタライズ メニューの「編集」-「境界線を描く」 上記の方法は、操作対象が「境界線」のため、たとえば「選択範囲」- …

no image

Photoshopで画像半分をぼかす(グラデーションで半透明に)する

よく忘れる(というか覚えられない)ので、備忘録。 1.画像を開く。またはレイヤーを選択。 2.レイヤー下の「ベクトルマスクを追加」ボタンをクリック 3.半身をグラデーションにしたい範囲をドラッグで選択 …