16

jQueryの公式ドキュメントによると、この関数は次のようになります。

「オフセットされた親を基準にして、一致した要素のセットの最初の要素の現在の座標を取得します。」

次のコードは値51を返すことが期待されていますが、値0を返します。誰かが理由として洞察を提供できますか？前もって感謝します。

css（top：xx）の追加が機能することは知っていますが、機能する場合、それは、要素がtopのcssプロパティを持っている場合にのみposition（）が機能することを意味しますか？

<html>

<head>
    <style type="text/css">
        .outer
        {
            width:200px;
            height:200px;
            overflow-y:auto;
            border:1px dotted grey;
            position:absolute;
        }
        .inner
        {
            width:50px;
            height:50px;
            margin-top:  50px;
            border:1px solid red;
        }
    </style>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript"">

        $(document).ready(function () {
            $('.inner').mousedown(function (e) {
                alert($(this).position().top);
            })
        })
    </script>
</head>
<body>

    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>
4

3 に答える 3

10

APIの説明は正しいです。内部要素の（初期）デフォルトのCSSプロパティ値はtop:auto。です。margin-top:50pxご存知のように、内側の要素が上から見ているような印象を与えるものがありますが50px、そうではありません。position().top = 0要素の先頭は実際には0px親要素からのものであるため、 jQueryが返されます。

jQueryが関数を使用して期待値を返すには、親に対して.position()内部を<div>相対的に（または必要に応じて絶対的に）配置し、最上位の値を指定してmargin-topプロパティを削除する必要があります。次に例を示します。

.inner {
  position:relative;
  top:50px;
  ...
}
于 2012-07-18T13:45:29.663 に答える
5

これはあなたを助けていますか？：

document.getElementById("innerDiv").offsetTop;

または、jqueryオフセットメソッドを使用します。

.offset（）メソッドを使用すると、ドキュメントに対する要素の現在の位置を取得できます。これを.position（）と比較してください。これは、オフセットされた親を基準にした現在の位置を取得します。グローバル操作（特にドラッグアンドドロップの実装）のために既存の要素の上に新しい要素を配置する場合は、.offset（）の方が便利です。

于 2012-07-18T12:34:04.513 に答える
5

要素を配置するためにそれらを使用している場合、top は 0 以外の値のみを返すため、100% 正しい 0 を警告していますが、ここでは要素を配置するためにマージンとパディングを使用しているため、それらを使用して上部の距離を取得します。

$(document).ready(function () {
            $('.inner').mousedown(function (e) {
                alert($(this).css("margin-top"));
            })
        })

位置を使用する場合は、それを行います

.inner
        {   position:absolute;
            width:50px;
            height:50px;
            top:  50px;
            border:1px solid red;
        }

そして、通常のコーディングを行います

于 2012-07-18T12:31:56.253 に答える