Вложенный липкий элемент с нулем слева не липкий - PullRequest
Новая
       9

Вложенный липкий элемент с нулем слева не липкий

0 голосов
/ 25 декабря 2018

Почему мой вложенный липкий элемент с left: 0 не залипает, а вложенный элемент с top: 0 нормально залипает? 

.scroll {
  width: 200px;
  height: 200px;
  border: 1px solid;
  overflow: auto;
}

.container {
  width: 600px;
  height: 1000px;
}

.sticky-left {
  position: sticky;
  left: 0;
}

.sticky-top {
  position: sticky;
  top: 0;
}
<div class="scroll">
  <div class="sticky-top">sticky-top</div>
  <div class="sticky-left">sticky-left</div>
  <div class="container">
    <div class="sticky-top">sticky-top-nested</div>
    <div class="sticky-left">sticky-left-nested</div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 25 декабря 2018

Давайте добавим некоторую границу, и мы ясно увидим, что происходит: 

.scroll {
  width: 200px;
  height: 200px;
  border: 1px solid;
  overflow: auto;
}
.scroll > div {
  border:2px solid green;
}

.container {
  width: 600px;
  height: 1000px;
  border:2px solid red!important;
}
.container > div {
  border:2px solid green;
}

.sticky-left {
  position: sticky;
  left: 0;
}

.sticky-top {
  position: sticky;
  top: 0;
}
<div class="scroll">
  <div class="sticky-top">sticky-top</div>
  <div class="sticky-left">sticky-left</div>
  <div class="container">
    <div class="sticky-top">sticky-top-nested</div>
    <div class="sticky-left">sticky-left-nested</div>
  </div>
</div>

Как видите, вложенные липкие элементы имеют ширину, равную родительской ширине (поскольку они являются блочными элементами), поэтому места длялевый-липкий, чтобы иметь любое липкое поведение 1 , поскольку у него есть width:100% в отличие от верхнего, который все еще может придерживаться, потому что его высота меньше, чем родительская высота.

Для не вложенных элементов я думаю, что это понятно.

Сделайте элемент inline-block или уменьшите ширину, и у вас будет липкое поведение: 

.scroll {
  width: 200px;
  height: 200px;
  border: 1px solid;
  overflow: auto;
}
.scroll > div {
  border:2px solid green;
}

.container {
  width: 600px;
  height: 1000px;
  border:2px solid red!important;
}
.container > div {
  border:2px solid green;
  width:150px;
}

.sticky-left {
  position: sticky;
  left: 0;
}

.sticky-top {
  position: sticky;
  top: 0;
}
<div class="scroll">
  <div class="sticky-top">sticky-top</div>
  <div class="sticky-left">sticky-left</div>
  <div class="container">
    <div class="sticky-top">sticky-top-nested</div>
    <div class="sticky-left">sticky-left-nested</div>
  </div>
</div>

1 Элемент с липким расположением - это элемент, вычисленное значение позиции которого является липким, Он обрабатывается как относительно позиционированный, пока его содержащий блок не пересекает указанный порог (например, задает для top значение, отличное от auto) в пределах своего корневого потока (или контейнера, в котором он прокручивается), и в этот момент он рассматривается как«застрял» до встречи с противоположным краем содержащего его блока . ref

В вашем случае вы всегда встречали противоположноекрай.

0 голосов
/ 25 декабря 2018

Согласно документации MDN на position: sticky, свойства top, right, bottom и left определяют конечное местоположение позиционированных элементов .Я предполагаю, что для того, чтобы он был прикреплен сверху, он также должен содержать top: 0.Добавленный фрагмент, похоже, работает. 

.scroll {
  width: 200px;
  height: 200px;
  border: 1px solid;
  overflow: auto;
}

.container {
  width: 600px;
  height: 1000px;
}

.sticky-left {
  position: sticky;
  left: 0;
  top: 0; // Add this so it sticks to top
}

.sticky-top {
  position: sticky;
  top: 0;
}
<div class="scroll">
  <div class="sticky-top">sticky-top</div>
  <div class="sticky-left">sticky-left</div>
  <div class="container">
    <div class="sticky-top">sticky-top-nested</div>
    <div class="sticky-left">sticky-left-nested</div>
  </div>
</div>
...