Почему позиция sticky не работает, если за ней следует позиция абсолютного элемента? - PullRequest
Новая
       39

Почему позиция sticky не работает, если за ней следует позиция абсолютного элемента?

0 голосов
/ 27 февраля 2019

Ниже приведен фрагмент кода, и если запустить его, вы увидите, что элемент заголовка не прилипает.Я посмотрел на следующие вопросы. «Position: sticky;» не работает CSS и HTML и CSS: «position: sticky» не работает, когда определено значение «100» среди многих других, но это не помогло ..

Вот мой код. 

<body style="margin: 0">
  <div id="header" style="height: 50px;width: 100%;position: sticky;top: 0px;background-color: rgb(33, 150, 243);">
    <div>header contents</div>
    <div>header contents</div>
  </div>
  <div id="container" style="position: absolute; top: 50px; left: 0px; width: 100%; background: #ddd;">
    <div style="height: 1000px;">
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
    </div>
  </div>
</body>

Также я заметил, что если я удалю position: absolute из div контейнера, sticky начнет работать правильно.Любая помощь будет оценена.

Ответы [ 3 ]

0 голосов
/ 27 февраля 2019

Как упомянуто выше, поскольку высота тела не установлена, значение position заголовка никогда не изменится с relative на fixed (это то, что делает sticky - см. (https://www.w3schools.com/cssref/pr_class_position.asp).

* 1007)* Если вам необходимо сохранить контейнер абсолютно позиционированным, но вы не можете / не хотите определять высоту тела, вы можете использовать position:fixed вместо position:sticky в качестве идентификатора заголовка и включить z-index:1, чтобы он отображалсянад контейнером: 

<body style="margin: 0">
  <div id="header" style="height: 50px;width: 100%;position: fixed;top: 0px;background-color: rgb(33, 150, 243); z-index:1;">
    <div>header contents</div>
    <div>header contents</div>
  </div>
  <div id="container" style="position: absolute; top: 50px; left: 0px; width: 100%; background: #ddd;">
    <div style="height: 1000px;">
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
    </div>
  </div>
</body>
0 голосов
/ 16 апреля 2019

В этом случае, если вы хотите установить высоту div в конкретное значение, вы можете установить min-height: 1000px для элемента body и установить z-index для заголовка div # равным 1. 

<body style="margin: 0;min-height: 1000px">
<div id="header"
     style="height: 50px;width: 100%;position: sticky;top: 0;background-color: rgb(33, 150, 243);z-index:1">
    <div>header contents</div>
    <div>header contents</div>
</div>
    <div id="container" style="position: absolute; top: 50px; left: 0; width: 100%; background: #ddd;">
        <div style="height: 1000px;">
            <div>some contents</div>
            <br>
            <div>some contents</div>
            <br>
            <div>some contents</div>
            <br>
            <div>some contents</div>
            <br>
            <div>some contents</div>
            <br>
        </div>
    </div>


</body>
0 голосов
/ 27 февраля 2019

Добавление границы к телу покажет вам проблему: 

<body style="margin: 0;border:2px solid red;">
  <div id="header" style="height: 50px;width: 100%;position: sticky;top: 0px;background-color: rgb(33, 150, 243);">
    <div>header contents</div>
    <div>header contents</div>
  </div>
  <div id="container" style="position: absolute; top: 50px; left: 0px; width: 100%;">
    <div style="height: 1000px;">
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
    </div>
  </div>
</body>

Как видите, высота тела определяется липким элементом, поэтому не имеет липкого поведения .если вы удалите positon:absolute, вы сделаете элемент частью потока, таким образом, рост тела увеличится, и вы будете вести себя липко 

<body style="margin: 0;border:2px solid red;">
  <div id="header" style="height: 50px;width: 100%;position: sticky;top: 0px;background-color: rgb(33, 150, 243);">
    <div>header contents</div>
    <div>header contents</div>
  </div>
  <div id="container" style=" top: 50px; left: 0px; width: 100%;">
    <div style="height: 1000px;">
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
    </div>
  </div>
</body>

Проблема не в элементе position:absolute, а в высоте содержащего блока (родительский контейнер) липкого элемента.Это должно быть достаточно большим (по крайней мере, больше, чем липкий элемент), чтобы иметь липкое поведение.

Увеличение высоты тела и сохранение абсолютного элемента также исправят это: 

<body style="margin: 0;border:2px solid red;height:200px;">
  <div id="header" style="height: 50px;width: 100%;position: sticky;top: 0px;background-color: rgb(33, 150, 243);">
    <div>header contents</div>
    <div>header contents</div>
  </div>
  <div id="container" style="position: absolute; top: 50px; left: 0px; width: 100%;">
    <div style="height: 1000px;">
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
    </div>
  </div>
</body>

Еще один связанный ответ, где вы можете найти больше примеров того, как работает липкая: https://stackoverflow.com/a/54610362/8620333

...