position: relative;が動く

Question

position: relative; 動を利用して文字や画像を置くと、そのページを開いたときに、
元あった位置からややあって動いてその位置に移動します。
以下に配置したコンテンツも倣って動いてしまうので、困っています。
動くのはページを開いた瞬間だけですが、これを解消する方法がありましたらご教示いただけませんでしょうか？

該当する画像につけたclass
.snstypea {position: relative;
top: -38px;
left:465px; }

再生する環境 Chrome,win7

Comments

[takito]

HTMLをここに記述いただくことは可能ですか？
またそのような動きを見たブラウザの種類やバージョンも教えてください。

Answer 1

position: relative; は、それを指定した要素が「本来表示される位置」から相対的にどのくらいの位置に表示するかを指定するものですね。

なので、指定しているその画像よりも上にある別の要素が関係してると思います。

例えばとても大きな画像ファイルがあってその表示に時間がかかっているなど、心当たりないでしょうか？

Answer 2

読んだ限りでは細かい原因は判断が付きませんが、
position: relative;のブロックが動いているのではなくて
その前後のブロックの読み込みが遅れて動いていうんじゃないでしょうか？

前後のブロックにheightを指定するか
javascriptで予めすべてのコンテンツを読み込んでから表示するよう試してみてはいかがでしょうか？

Comments

[ritto1109]

heightを指定する。をヒントに
.snstypea {position: relative;
top: -38px;
left:465px;
height:0px; }　
と指定してみました。クラスはDIVにかけており、DIVの中にsnsを読み込ませていたので、
divが0pxでもむりくり表示されます。
かつ、snsボタンの生成が遅くとも、ズレを表示させず表示することが出来ました。
ありがとうございました。