3

ある Web サイトで、body要素が設定されており、本文の最上位の要素に設定されている CSS 値position: relativeのスケールによって、本文内のコンテンツが下に移動しているように見えることがわかりました。margin-top

  1. body に CSS 'position: relative' が設定されているのはなぜですか? バグを修正することを目的としていますか？要素の絶対位置を設定できない IE のバグがあったと聞きました。

  2. body 内の最初の要素の「のみ」の「マージントップ」がすべての要素の位置に影響するのはなぜですか?

  3. Javascript 関数 'getBoundingClientRect()' は、最上位要素に設定されたこの margin-top 値を考慮しないため、どの要素に対しても間違った値を返します。

4

1 に答える 1

3

1. Why does the body have CSS 'position:relative' set? Is it intended to fix some bug? I heard that there was some IE bug where we were not able to set absolute positioning of elements.

FC: これはバグを修正するためのものではありませんが、おそらく body 要素の (直接の) 子の 1 つにposition:absolute. body に が含まれていないposition:relative場合、その子は body 要素ではなく、キャンバス (ブラウザの内部ウィンドウ) に対して相対的に配置されます。完全なストーリーについては、このチュートリアル('Nested position:absolute') を参照してください。昔はそういう意味で IE のバグがあったのかもしれませんが、IE8 の時点では IE はこれに関しては正常に動作しています。

.
2. Why does 'margin-top' of 'only' the first element inside the body affect the position of every element?

FC: それは設計によるものです。垂直マージンは、後続の兄弟要素の位置に影響しますが、aは影響position:relative; top:20pxしません。繰り返しますが、完全なストーリーについては、前述のチュートリアルを参照してください。

.
3. Javascript function 'getBoundingClientRect()' returns wrong value for any element as it does not consider this margin-top value set on topmost element.

FC: それも意図的なものですが、あなたが正しく解釈しているかどうかはわかりません。それを示すためにいくつかのコードを投稿できますか? 私が知っていることは、その方法には注意する必要があるということです。代替案を含む完全なストーリーについては、このどっとろページを参照してください。

于 2014-06-26T07:43:30.450 に答える