css粘性位置浮动bug

时间:2017-04-18 11:04:37

标签: css css3 position sticky

我使用CSS位置的粘性值,当顶部div高度不是int值但浮动值然后设置底部div顶部与顶部高度相同,它将具有他们之间的空间!但使用绝对和固定没有这个问题。

div和b div有空格



html,body {
  margin: 0;
}

.container {
  height: 1000px;
}

.container > div {
  height: 65.9px;
}

.a {
  position: sticky;
  /* position: static */
  /* position: sticky */
  width: 340px;
  top: 0px;
  background: green;
  z-index: 20;
}

.b {
  position: sticky;
  top: 66px;
  /* top: 65.9 */
  width: 100px;
  z-index: 10;
  background: pink;
  over-flow: hidden;
}

.c {
  position: fixed;
  width: 100px;
  left: 120px;
  top: 66px;
  background: red;
}

.d {
  position: absolute;
  width: 100px;
  left: 240px;
  top: 66px;
  background: yellow;
}

<!-- position sticky float number bug -->
<div class="container">
  <div class="a">a: height=65.9px sticky position</div>
  <div class="b">b: top=66px sticky position</div>
  <div class="c">c: top=66px fixed position</div>
  <div class="d">d: top=66px absolute</div>
</div>
&#13;
&#13;
&#13;

有人可以帮我看看吗?

0 个答案:

没有答案