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

ブログシステム物色

Geeklog インストール難しい、多機能、公式サイトの掲示板に質問すると、2人のモデレーターが親切に答えてくれた。うれしかった。 xaioを使う場合は、php.iniの設定を変えないといけなかった。 …

no image

facebookアプリに初挑戦

そろそろ、手を付けないとやばいかもと、重い腰をあげることにした。 まずは早速、ディベロッパー登録でつまずいた。 登録するには携帯メール(docomoなどのキャリアメール)が必要なのだが、自分はPHSし …

no image

珍しく、講習会

昨日は珍しく、講習会なんぞに行ってきた。 内容は、SEO。 Webサイトをちゃんとする方法について、講師は丁寧に解説してくれた。 ま、要するに、右脳も左脳も前頭葉も後頭葉も全力でこき使ってください、う …

no image

情報セキュリティアドミニストレータ試験

セキュアド試験、受験。 午前の試験、結構簡単だった。 今年から50問->55問になったので内容も変わったのかと心配していたのだが、過去4年で一番やさしかったのではないか。 苦手な計算問題が少なかったよ …

no image

LimeSurvey2.00+(131009) インストールでトラブル

たまたま使っていたLimeSurveyの管理画面右上に、 「利用可能なアップデート: 2.00+(131009) または 2.05RC2(131011)」 とあったので、 「しばらくアップデートしてい …