<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>CSS Position Examples</title>
   <style>
      * {
         box-sizing: border-box; /* Включва рамката и вътрешните отстояния в зададените размери. */
      }

      body {
         margin: 0; /* премахва стандартното външно отстояние на страницата. */
      }

      .sticky-header {
         position: sticky; /* запазва мястото на елемента и го задържа при превъртане. */
         top: 0; /* началото на горния край на видимата област. */
         z-index: 10; /* Показва елемента над съдържание с по-нисък z-index. */
         padding: 14px 24px; /* вътрешно отстояние: */
         color: white;
         background: #263b80;
      }

      main {
         max-width: 800px; /* ограничава максималната ширина на основното съдържание. */
         margin: 0 auto; /* центрира съдържанието . */
         padding: 24px; /*  вътрешно отстояние */
      }

      .example {
         margin: 24px 0; /*  външно отстояние */
         padding: 18px; /* вътрешно отстояние */
         border: 1px solid #ccd2df; /* рамка с дебелина 1 px. */
         border-radius: 8px; /* заобля ъглите на рамката. */
      }

      .static-box {
         position: static; /* Това е стандартното позициониране; top и left не се прилагат. */
         padding: 12px; /* вътрешно отстояние */
         background: #e8edf7;
      }

      .relative-box {
         position: relative; /* Позволява изместване спрямо първоначалното място. */
         top: 10px; /* Премества елемента 10px надолу. */
         left: 20px; /* Премества елемента 20px надясно. */
         padding: 12px; /* вътрешно отстояние */
         background: #d9f2e6;
      }

      /* Този контейнер е отправна точка за абсолютно позиционираните елементи. */
      .position-stage {
         position: relative; /* наследстваните absolute елементи се позиционират спрямо този контейнер. */
         height: 220px; /* височина от 220 px. */
         overflow: hidden; /* скрива части от съдържанието, които излизат извън контейнера. */
         border: 2px dashed #8792a8;
         background: #f5f6fa;
      }

      /* ABSOLUTE: позиционира се спрямо най-близкия предшественик с position различно от static. */
      .absolute-top-right {
         position: absolute; /* Изважда елемента от нормалния поток. */
         top: 16px; /* Поставя горния край на 16px от горния край на контейнера. */
         right: 16px; /* Поставя десния край на 16px от десния край на контейнера. */
         z-index: 2; /* Показва елемента над елементи със z-index 1. */
         padding: 10px;
         color: white;
         background: #c44536;
      }

      /* inset е съкратен запис за top, right, bottom и left — в този ред. */
      .absolute-inset {
         position: absolute; /* Изважда елемента от нормалния поток. */
         inset: 58px 30px 24px 30px; /* Задава top: 58px, right: 30px, bottom: 24px и left: 30px. */
         z-index: 1; /* Показва елемента зад тези със z-index 2 и 3. */
         display: grid; /* Подрежда съдържанието му чрез Grid. */
         place-items: center; /* Центрира съдържанието хоризонтално и вертикално. */
         border: 2px solid #7148a6; /* Добавя плътна рамка с дебелина 2 px. */
         background: rgb(193 165 230 / 55%); /* Задава полупрозрачен фон. */
      }

      /* При inset: auto right bottom auto се задават само right и bottom. */
      .absolute-bottom-right {
         position: absolute; /* Изважда елемента от нормалния поток. */
         inset: auto 16px 12px auto; /* Еквивалентно на top: auto, right: 16px, bottom: 12px, left: auto. */
         z-index: 3; /* Показва елемента над останалите два absolute елемента. */
         padding: 8px; /* Добавя вътрешно отстояние от 8 px. */
         color: white; /* Задава бял цвят на текста. */
         background: #7148a6; /* Задава цвят на фона. */
      }

      /* FIXED: позиционира се спрямо видимата област на прозореца. */
      .fixed-button {
         position: fixed; /* Елементът остава на същото място във viewport-а при превъртане. */
         right: 20px; /* Поставя го на 20px от десния край на viewport-а. */
         bottom: 20px; /* Поставя го на 20px от долния край на viewport-а. */
         z-index: 100; /* Показва бутона над елементите с по-нисък z-index. */
         padding: 12px 16px; /* вътрешно отстояние: 12px вертикално и 16 px хоризонтално. */
         border: 0; /* Премахва рамката на бутона. */
         color: white;
         background: #16734b;
         box-shadow: 0 3px 12px rgb(0 0 0 / 25%);
      }

      .spacer {
         height: 500px; /* Добавя височина, за да има място за превъртане. */
         padding-top: 20px; /* Добавя вътрешно отстояние отгоре. */
      }
</style>
</head>
<body>
   <header class="sticky-header">
      Sticky header — scroll down
   </header>
   <main>
      <h1>CSS position examples</h1>

      <section class="example">
         <h2>static</h2>
         <div class="static-box">
            Static box. The <code>top: 30px</code> rule is ignored.
         </div>
      </section>
      <section class="example">
         <h2>relative</h2>
         <p>The green box shifts down and right, but keeps its original space.</p>
         <div class="relative-box">
            Relative box: <code>top: 10px; left: 20px</code>
         </div>
      </section>
      <section class="example">
         <h2>absolute, inset, and z-index</h2>
         <p>
            These boxes are positioned inside the dashed container because it has
            <code>position: relative</code>.
         </p>

         <div class="position-stage">
            <div class="absolute-top-right">
               <code>top: 16px; right: 16px</code><br>
               z-index: 2
            </div>

            <div class="absolute-inset">
                <code>inset: 58px 30px 24px 30px</code><br>
                z-index: 1
            </div>

            <div class="absolute-bottom-right">
                <code>inset: auto 16px 12px auto</code><br>
                z-index: 3
            </div>
         </div>
      </section>

      <div class="spacer">
         Scroll farther to see that the sticky header stays at the top.
      </div>
   </main>
   <button class="fixed-button">Fixed button</button>
</body>
</html>