bootstrap: position

by istiq20

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Position</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <!--<div class="position-relative bg-primary-subtle m-5" style="height: 400px">-->
    <!--    <div class="position-absolute top-0 start-100 bg-primary translate-middle" style="width: 50px; height: 50px;"></div>-->
    <!--    <div class="position-absolute 0 start-50 bg-primary translate-middle-x" style="width: 50px; height: 50px;"></div>-->
    <!--    <div class="position-absolute top-100 start-0 bg-primary translate-middle" style="width: 50px; height: 50px;"></div>-->
    <!--</div>-->

    <div class="bg-primary" style="width: 200px; height: 200px"></div>
    <div class="bg-success fixed-top" style="width: 200px; height: 200px"></div>
    <div class="bg-danger" style="width: 200px; height: 200px">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
      doloremque earum eligendi ex hic modi obcaecati perferendis quae,
      quibusdam saepe temporibus totam ullam! Architecto cumque deserunt
      exercitationem nulla officiis, sunt! Lorem ipsum dolor sit amet,
      consectetur adipisicing elit. Cum, ipsum possimus? Amet blanditiis
      corporis illo illum ipsam iste laborum laudantium minus modi nemo
      obcaecati officiis, pariatur possimus sed vel voluptate. Lorem ipsum dolor
      sit amet, consectetur adipisicing elit. Aut distinctio laudantium neque
      provident quod sed? Aut dolore fuga quibusdam quisquam sequi. Corporis,
      excepturi facilis fugit odit placeat soluta sunt. Dolores! Lorem ipsum
      dolor sit amet, consectetur adipisicing elit. Aliquid, amet deserunt
      dicta, dolorum et facere illum impedit laudantium neque numquam pariatur
      quidem quod ratione recusandae reiciendis, sapiente suscipit veniam
      voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
     ...