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

執筆者:

関連記事

Excel2013 セル入力直後から確定までが遅い

オプション-詳細設定-表示の、「ハードウェア グラフィック アクセラレータを無効にする」のチェックで、すごく改善した。 自分の周りで相当悩んでいる人がいたので、一緒に調べた結果、わかった。 他にも悩ん …

no image

お客さんのWebショップ

管理しているお客さんのショップWebサイト。 ハッキリいって、儲かっていない。 5月末に立ち上げて未だ購買数ゼロ。 まあ、商品点数が十点少々しかないのが一番の原因なのだが。 昨日はそれで色々調査。 そ …

PhotoshopElementsで写真の角を丸くする その2

込み入った写真の場合、境界線がはっきりせず、上記の方法が使えなかった・・・以下、別のやり方。   1.シェイプツールの角丸長方形で写真の上にシェイプのレイヤーを作る。このとき描画色は写真に含まれない色 …

クリップボードの画像をファイル保存せずそのまま投稿画面に貼り付けられるとは・・・素晴らしい OnePress Image Elevator

上記の画面は、FireFoxのScreenShoterプラグインで、画面から直接クリップボードに画像を撮って、WPの投稿画面にペーストしただけのもの。 WordPress › OnePress Ima …

TeraStationからQnapへのデータ移行

使用開始から5年を過ぎた会社のNAS。TeraStation TS-WXL973。 使用済み容量が90%を超え、本年度中にはパンクすることが目に見えてきたので、NASを新調することにした。 ネットで評 …