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

執筆者:

関連記事

WooCommerceのメール通知設定「注文保留」は支払方法「銀行振込」において必須

はまった。 先ほどからWooCommerceをテスト環境でテストしている。 困ったことに、支払方法を銀行振込にしたときに限り(クレジットカードと代引きは影響なし)、メールが注文者に送信しなくなった。 …

no image

「〇〇屋商店」のラベルを付けたGmailメッセージからGASで件名と本文の一部を正規表現で取り出してスプレッドシートに格納

仕事でGoogle App Script(GAS)を使うケースが出てきそうなので、休日なれど、自主勉してみた。 やりたいことは、オンラインショップの注文メールの中から、必要な事項を取り出して、スプレッ …

no image

Artisteerでコンテンツ・エリアを作成して、それをWordPressのHomeとして表示する方法が無いか、探ってみた

通常は、Artisteerで作り、WordPressでエクスポートすると、ヘッダやフッタは残るが、コンテンツは除外される。 せっかくコンテンツできれいなレイアウトや画像、スライドを作っても、それをWo …

no image

phpESPつまづいたところ

AKI ON WEB: Webアンケートシステム「phpESP」を試してみた を参考に、このソフトのインストールに挑戦。 しかし、DB作成で、まず転ぶ。 mysql_populate.sqlが通らない …

no image

パラメータクエリにパラメータをセットして実行した結果をデータシートで表示する」というコードの実行で3065エラー

Accessの仕様として、パラメータクエリだけが駄目なのかと思ったら、なんと選択クエリが駄目なのだそう。 理由は、Executeメソッドはアクションクエリのもので、選択クエリのものではないからだそう。 …