0

ビューポートの上部境界線から特定の固定ピクセル数で Web サイトに要素を配置しようとしています。問題は、絶対配置を使用しているにもかかわらず、配置が依然としてボディ スタイルに依存することです。たとえば、本文に相対位置とマージンの上限値がある場合、絶対配置要素の位置は本文のマージン上限値だけ増加します。では、どうすればボディスタイルに依存しないようにできますか?

注:フレームワークは使用できません。単純な JS だけです。

更新:スクロールによって位置が影響を受けるようにしたいので、「固定」位置はオプションではありません。また、クロスブラウザにしたいです。

4

4 に答える 4

1

とても簡単ですが、IE7 では動作しません。position:fixedマージン、パディング、その他の親要素に関係なく、ビューポート (ブラウザーの端) に対して要素を配置するために使用できます。

JavaScript でこれを行うには:

var container = document.getElementById('container');// This is your container. Replace accordingly.
var elementToInsert = document.createElement("div");// Create a new element.
elementToInsert.style.position ='fixed';// It will now position in relation to the viewport, regardless of where it is nested, etc.
elementToInsert.style.top = '100px';// Always add pixels, won't work otherwise.
elementToInsert.style.left = '300px';// Always add pixels, won't work otherwise.
elementToInsert.style.width = '500px';// Always add pixels, won't work otherwise.
elementToInsert.style.height = '500px';// Always add pixels, won't work otherwise.
container.appendChild(elementToInsert);// Append the new div to the container.

また、これには JS は必要ありません。プレーンな古い HTML + CSS も同じように機能します。CSSの詳細はposition:fixed; こちら

于 2012-11-19T16:10:08.313 に答える
1

positionに設定するだけですfixed。

var div = document.createElement("div");
div.style.position = "fixed";
div.style.top = "0";
div.style.left = "0";
div.appendChild(document.createTextNode("Some Text"));
document.getElementsByTagName("body")[0].appendChild(div);
于 2012-11-19T16:11:32.973 に答える
0

Web 開発者がブラウザー間の違いを解決するために使用する 1 つのトリックは、css ファイルを使用して本文の余白などのプロパティをリセットすることです。

例: http://meyerweb.com/eric/tools/css/reset/

これは、本文にマージンを追加する CSS ではないことを前提としています。

于 2012-11-19T16:21:09.497 に答える
0

おっと-とにかくjQueryでこれをやった-将来の参考のために残します。ダウン投票者もそれを残すことができることを願っています

これは Chrome、Fx、IE8、IE9 で動作します

デモ

$(function() {
  $("img").on("click",function() { 
    $(this).offset({top:0,left:0}); 
  });
});

つまり、あなたができることを意味します

$(function() {
  $("#myimg").offset({top:0,left:0}); 
});
于 2012-11-19T16:24:17.963 に答える