CSSのスティッキー位置フロートのバグ

Question

トップdivの高さがint値ではなくフロートの値で、bottomのdivのトップをトップの高さと同じにすると、CSS位置のスティッキー値が使用されます。しかし、この問題がない絶対と固定を使用してください。

の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>

を持っている誰かが、私はそれを見るのを助けることができますか？

Answer 1

このコードをチェックしてください！私には不明

.container { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.container > div { 
 
    height: 50%; 
 
} 
 

 
.row { 
 
    float: left; 
 
} 
 

 
.a { 
 
    position: relative; 
 
    background: green; 
 
    height: 50%; 
 
    width: 100%; 
 
} 
 

 
.b { 
 
    position: relative; 
 
    background: pink; 
 
    height: 50%; 
 
    width: 33.33%; 
 
} 
 

 
.c { 
 
    position: relative; 
 
    background: red; 
 
    height: 50%; 
 
    width: 33.33%; 
 
} 
 

 
.d { 
 
    position: relative; 
 
    background: yellow; 
 
    height: 50%; 
 
    width: 33.33%; 
 
}

<!-- position sticky float number bug --> 
 
<div class="container"> 
 
    <div class="row a">a</div> 
 
    <div class="row b">b</div> 
 
    <div class="row c">c</div> 
 
    <div class="row d">d</div> 
 
</div>