Question

我遇到了这个错误。我添加位置：粘性;当我处于桌面模式（最大宽度：760px）时它不能正常工作，但是当我处于移动模式时它会起作用。

这是我的代码

＆＃13;

/* TOOL BAR */

.tool-bar {
  /* Fixed size for the tool bar */
  width: 100px;
  /* To add a space between the header and the tool bar */
  margin: 30px 0;
  /* To have a nice column distribution centered */
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: center;
  /* Keep the tool bar on screen when scrolling */
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

@media screen and (max-width: 760px) {
  /* Tool bar */
  .tool-bar {
    /* Take all the space instead of 100px */
    width: 100%;
    /* Stick the tool bar on the header to win space */
    margin: 0;
    /* Keep the bar tool visible when scrolling */
    position: sticky;
    position: -webkit-sticky;
    top: 0;
  }
}

＆＃13;

<div class="tool-bar">
  <!-- TOOLS -->
  <div class="tools">
    <ul>
      <li><img src="pictures/grids.png" alt="Grid" id="grid"></li>
      <li><img src="pictures/pen.png" alt="Pen" id="pen"></li>
      <li><img src="pictures/fill.png" alt="Fill" id="fill"></li>
      <li><img src="pictures/dropper.png" alt="Dropper" id="dropper"></li>
      <li><img src="pictures/eraser.png" alt="Eraser" id="eraser"></li>
      <li><input type="color" id="color-picker" class="color-picker-style"></li>
      <li><img src="pictures/reset.png" alt="Reset" id="reset"></li>
    </ul>
  </div>

</div>

＆＃13;

在桌面模式下，它表现为一个位置：相对。

我已经检查过，没有溢出，没有高度：100％......

如果您有任何想法？谢谢！

Answer 1

首先，确保您的浏览器支持粘性 https://caniuse.com/#search=sticky。
其次，粘性元素只会粘贴在其父级内部，如果父级只有高度等于子级，则不会看到任何效果。

编辑：可以找到位置粘贴的更多内容here

位置：粘在桌面上不起作用，但在移动设备上正常

1 个答案: