主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

position: relative;を使うと、もともとの画像の場所分の余白ができる。

縦に並んだ画像を、position: relative;で、上の方に移動させて配置すると、その画像がもともとあった場所の分、下に余白ができる。

そういうときは、その移動させた要素に対して、margin-bottom: -○○px;など、ボトムにネガティブマージンをとってやると、余白がなくなります。

あんまりよろしい感じはしないですが、どうしてもposition: relative;を使わないとだめなときは。という感じです。

一応だいたいのブラウザで確認しましたが、全部大丈夫でした。


あと同じような感じで、position: relative;ではなくて、ネガティブマージンで上にやったときは、IE6では上がった分が隠れるというか切れる、ということがありますが、そういうときは、position:relative;を指定するとピョコっと出てきます。