HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery .position child list</title>

  <style>

    body { font-family: sans-serif; padding: 16px; }

    #grid {

      position: relative;

      width: 280px; height: 160px;

      border: 2px dashed #94a3b8;

      background: #fff;

    }

    .tile {

      position: absolute;

      width: 64px; height: 48px;

      background: #6366f1; color: #fff;

      display: flex; align-items: center; justify-content: center;

      font-size: 13px; border-radius: 6px;

    }

    #list { margin-top: 12px; font-family: monospace; line-height: 1.8; }

  </style>

</head>

<body>

  <div id="grid">

    <div class="tile" style="left:12px;top:12px">A</div>

    <div class="tile" style="left:100px;top:24px">B</div>

    <div class="tile" style="left:180px;top:80px">C</div>

  </div>

  <div id="list"></div>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script>

    var lines = [];

    $("#grid .tile").each(function(i) {

      var pos = $(this).position();

      lines.push("Tile " + this.textContent + " → left: " + pos.left + ", top: " + pos.top);

    });

    $("#list").html(lines.join("<br>"));

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .position() — list child positions (Try It)