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

執筆者:

関連記事

秀丸で、例えば「123市」を「123都市」にするときの正規表現の使い方メモ

検索文字のうち、置き換え後に残したい部分を、カッコで囲むのがミソ。 検索文字:([0-9])市 置換文字:\1都市 wordだと「ワイルドカードを使用する」とすると、正規表現が使える。

no image

ITC

昨晩は飲み会だった。 さるNPOの総会後の懇親会。 酔っ払っていたので帰ってからすぐに布団に入って寝入ってしまったのだが、さっき、腕を蚊に喰われてかゆみで目が醒めてしまい、こうして日記を書いている。 …

no image

ContactForm7プラグイン-チェックしたチェックボックスの背景色を変える

本日やったこと。 ContactForm7プラグインを使っているが、チェックボックスのクリックが小さくて、なかなかクリックできないので、ホットスポットというか、クリック感知の範囲を広げたかった。 こん …

no image

Googleマーチャントの送料設定に苦労

商品をGoogleマーチャントに登録しているのだが、いつしかエラー(警告)が出ていた。 エラー内容は、「送料の副属性が少なすぎます」。 ヘルプを見ながら、 表見出し:送料(国:地域:サービス:価格) …

no image

パンフ

今日、ちょっとした託物があってお客様のところを訪ねた。 またついでに、このたび新しく制作した会社案内もついでに見てもらおうと持参した。 対応した女性に肝心のをお渡しした後、「会社案内をこのたび新しくし …