HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery .offsetParent() — badge</title>

  <style>

    .card {

      position: relative;

      width: 200px;

      padding: 24px;

      border: 1px solid #ccc;

      margin: 20px;

    }

    .badge {

      position: absolute;

      top: 8px;

      right: 8px;

      background: #e74c3c;

      color: #fff;

      padding: 4px 8px;

      font-size: 12px;

      border-radius: 4px;

    }

    .is-offset-parent { box-shadow: 0 0 0 3px #3498db; }

  </style>

</head>

<body>

  <div class="page">

    <div class="card">

      <span class="badge">New</span>

      <h3>Product card</h3>

      <p>Absolute badge is positioned inside this card.</p>

    </div>

  </div>

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

  <script>

    $(".badge").offsetParent().addClass("is-offset-parent");

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .offsetParent() — absolute badge (Try It)