Почему не работает position: sticky bottom 0

Question

Position sticky работает только с top: 0, а с bottom: 0 не прилипает к низу, в чем может быть причина?

У меня есть html

.form_fixed {
  position: sticky;
  right: 0;
  bottom: 0;
  left: 0;
  background: #0B1867;
  z-index: 25;
  padding: 25px 0;
}

<div id="fixed_form_wrapper">
  <div class="form_fixed">
    <div class="container">
      <div class="row">
        <div class="col-3">
          <ul>
            <li>
              <label>
                <input type="text" placeholder="Имя и Фамилия">
                </label>
            </li>
            <li>
              <label>
                <input type="text" placeholder="Название компании">
              </label>
            </li>
          </ul>
        </div>
        <div class="col-6">
          <div class="row">
            <div class="col-4">
              <ul>
                <li>
                  <label>
                    <input type="text" placeholder="Имя и Фамилия">
                  </label>
                </li>
              </ul>
            </div>
            <div class="col-8">
              <ul>
                <li>
                  <label>
                    <input type="text" placeholder="Название компании">
                  </label>
                </li>
              </ul>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <ul>
                <li>
                  <label>
                    <input type="text" placeholder="Позиции запроса">
                  </label>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-3 d-flex">
          <button class="btn-material btn-orange" type="button"><span class="btn-material-effect js-ripple"><i class="btn-material__circle"></i></span><span class="btn-name">Отправить запрос</span></button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Суть position:sticky в том, чтобы прибить в конкретной позиции в момент, когда элемент выходит из видимости в процессе прокрутки. Если в процессе прокрутки элемент не пройдет указанной позиции для закрепления - он и не закрепится.

Например, если элемент расположен в верхней части элемента, а якорем выступает bottom:0, то при прокрутке к концу страницы, позиция относительно bottom будет только расти, следовательно элемент никогда не закрепится.

Однако, если элемент расположен в нижней части - все работает:

.form_fixed {
  position: sticky;
  right: 0;
  bottom: 0;
  left: 0;
  background: #0B1867;
  z-index: 25;
  padding: 25px 0;
}

#fixed_form_wrapper {
  border: 1px solid black;
}

#ddddd {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 800px;
  background-color: pink;
}

<div id="fixed_form_wrapper">
  <div id="ddddd">
    <span>text start</span>
    <span>text end</span>
  </div>
  <div class="form_fixed">
    <div class="container">
      <div class="row">
        <div class="col-3 d-flex">
          <button class="btn-material btn-orange" type="button"><span class="btn-material-effect js-ripple"><i class="btn-material__circle"></i></span><span class="btn-name">Отправить запрос</span></button>
        </div>
      </div>
    </div>
  </div>
  <div>
    text text text
  </div>
</div>

Обрати внимание, что

БЛОГ НА HUSL

Почему не работает position: sticky bottom 0

Ответы (1 шт):