是否可以在div内获取当前的高度偏移量？

Question

我有一个高度为500px的div。 这是主要的div，在该div中，我想知道该div中当前line / div / html元素的位置偏移。

让我用图片解释一下：

假设我在Div 2中。我可以知道该div内任何位置的内容偏移多少像素吗？

这是我的示例标记：

<div class="main" style='height:500px'>

    <div id="div1">
    </div>
    <div id="div2">
    </div>
    <div id="div3">
    </div>

</div>

编辑：

主div内的所有div都具有可变高度，这是因为其中包含动态内容。

Answer 1

要知道相对于容器的偏移量 ，可以使用position() ：

重要的是您将parent设置为position：relative

 console.log($('#div2').position()) console.log($('#div2').offset()) 

 .main {background:purple;margin:30px;position:relative} #div1 {height:150px;} #div2 {height:3px;background:yellow} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div class="main" style='height:500px'> <div id="div1"> </div> <div id="div2"> </div> <div id="div3"> </div> </div> 

Answer 2

您可以使用jQuery position（）方法，该方法将返回，并且对象包含一个元素相对于另一个元素的位置。

 var position = $('#div2').position(); console.log(position); 

 #main{ position: absolute; } #div1, #div2, #div3 { position: absolute; height: 50px; width: 500px; } #div1 { top: 0; background-color: yellow; } #div2 { top: 75px; background-color: green; } #div3 { top: 150px; background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main" style='height:500px; background-color:red;'> <div id="div1"> </div> <div id="div2"> </div> <div id="div3"> </div> </div> 

Answer 3

看看jQuery的.position()函数。 但是，它不会考虑隐藏的元素。

 alert($("#four").position().top); 

 #one { background-color: lightblue } #two { background-color: red } #three { background-color: lightgreen } #four { background-color: lightgreen } #five { background-color: lightgreen } 

 <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="one">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> <div id="two"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <div id="three">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> <div id="four">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> <div id="five">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </div> </body> </html> 

Answer 4

该解决方案将允许您检查相对高度而无需在容器上设置position：relative。

jQuery提供了一个名为offset（）的函数，该函数使您可以查看任何元素相对于屏幕左上角（x：0，y：0）的x和y位置。 要确定元素相对于其容器的高度，可以从元素y坐标减去容器y坐标。

 var div_one_top = $("#div1").offset().top var div_main_top = $("div.main").offset().top var div_one_to_main_top = div_one_top - div_main_top $("#div1").text("#Div1 top relatative to the DOCUMENT: " + div_one_top) $("#div2").text(".main top relatative to the DOCUMENT: " + div_main_top) $("#div3").text("#Div1 top relatative to the div.main: " + div_one_to_main_top) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main" style='height:500px; padding:20px; position:absolute; left:22px; top: 45px'> <div id="div1"> </div> <div id="div2"> </div> <div id="div3"> </div> </div>