Cet article partage principalement des connaissances sur l'utilisation et la compatibilité de la méthode jQuery Position. La méthode position obtient le décalage de l'élément correspondant par rapport à l'élément parent. Les amis intéressés devraient y jeter un œil, j'espère que cela pourra aider tout le monde.
1. Méthode de position
Adresse de l'API jquery : http://jquery.cuishifeng.cn/position.html
La méthode de position obtient le décalage relatif de l'élément correspondant à l'élément parent.
2. Description
2.1 La différence avec offset()
.offset() est d'obtenir les coordonnées actuelles de l'élément par rapport au document
.position( ) peut obtenir la position décalée d'un élément par rapport à son élément parent, qui est l'élément ancêtre le plus proche et positionné de l'élément. 2.2 Calcul de la valeur La taille de la bordure, de la marge et du remplissage occupés par l'élément lui-même ne sont pas comptés. . La bordure et la marge de l'élément parent ne sont pas comptées, et le remplissage de l'élément parent est inclus. 3. Exemple de code<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery position()示例</title> <style> html { line-height: 1.15; } /*父元素--相对定位*/ .parent { position: relative; width: 200px; height: 400px; /*父元素的margin不计算在内*/ margin-top: 10px; /*父元素的border不计算在内*/ border: 1px solid green; /*父元素的padding计算在内*/ padding-top: 10px; } .child-1 { width: 100px; height: 100px; margin: 0 auto; border: 1px solid #2E8DED; } .child-2 { width: 100px; height: 100px; /*子元素的margin不计算在内*/ margin: 10px auto 0; /*子元素的border不计算在内*/ border: 1px solid #2E8DED; /*子元素的padding不计算在内*/ padding: 10px; } </style> </head> <body> <p class="parent"> <p class="child-1"> first child </p> <p class="child-2" id="no-2"> second child </p> </p> <script src=".output/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function() { //获取child-2子元素距离父元素的距离 console.log($('#no-2').position().top); }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery position()示例</title> <style> html { /*必须给予一致的设置,否则position()计算值不同*/ /*line-height: 1.15;*/ } /*父元素--相对定位*/ .parent { position: relative; width: 200px; height: 400px; /*父元素的margin不计算在内*/ margin-top: 10px; /*父元素的border不计算在内*/ border: 1px solid green; /*父元素的padding计算在内*/ padding-top: 10px; } .child-1 { width: 100px; height: 100px; margin: 0 auto; border: 1px solid #2E8DED; } .child-2 { width: 100px; height: 100px; /*子元素的margin不计算在内*/ margin: 10px auto 0; /*子元素的border不计算在内*/ border: 1px solid #2E8DED; /*子元素的padding不计算在内*/ padding: 10px; } </style> </head> <body> <p class="parent"> 文字文字 <p class="child-1"> first child </p> <p class="child-2" id="no-2"> second child </p> </p> <script src=".output/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function() { //获取child-2子元素距离父元素的距离 console.log($('#no-2').position().top); }); </script> </body> </html>
Analyse du positionnement CSS et des scénarios d'application
Comment utiliser la position CSS
Explication détaillée des exemples d'attributs de position CSS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!