在ul中使用绝对定位的子div

Question

我目前在使用column-count和绝对定位的div作为孩子时遇到了问题。

＆＃13;

＆＃13;

ul {
  column-count: 3;
  margin-top: 50px;
}
ul > li {
  position: relative;
  height: 300px;
  list-style: none;
}
ul > li > .child {
  position: absolute;
  top: -20px;
}

＆＃13;

<ul>
  <li>
    <div class="child">Positioned Absolute</div>
    Just some extra content
  </li>
  
  <li>
    <div class="child">Positioned Absolute</div>
    Just some extra content
  </li>
  
  <li>
    <div class="child">Positioned Absolute</div>
    Just some extra content
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

当使用否定top时，它似乎包含在上一列中，无论如何都可以解决这个问题？

我可以使用width: 33%，但是根据列数会有所改变，无论如何使用column-count来执行此操作？

Answer 1

添加     -webkit-transform: translate3d(0, 0, 0); -webkit-column-break-inside: avoid;让这项工作

＆＃13;

＆＃13;

ul {
  column-count: 3;
  margin-top: 50px;
}
ul > li {
  position: relative;
  height: 300px;
  list-style: none;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-column-break-inside: avoid;
}
ul > li > .child {
  position: absolute;
  top: -20px;
}

＆＃13;

<ul>
  <li>
    <div class="child">Positioned Absolute</div>
    Just some extra content
  </li>
  
  <li>
    <div class="child">Positioned Absolute</div>
    Just some extra content
  </li>
  
  <li>
    <div class="child">Positioned Absolute</div>
    Just some extra content
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;