基础粘性元素无视浮动类

Question

我在长表单的右上角有一个小切换按钮，用于切换表单是否可编辑。它参考表单的顶部和底部元素是粘性的。当我滚动到页面顶部时它工作正常，但是一旦我到达它变得粘稠的位置，它就会失去附加到它的 float-right class 的效果。这是代码：

<div class="columns small-8"><!-- First item of the form --></div>
<div class="columns small-4" data-sticky-container>
    <div class="switch round float-right" data-sticky data-top-anchor="userID:top" 
                data-btm-anchor="password:bottom" data-sticky-on="small">
        <input class="switch-input" id="switchEdit" name="switchEdit" type="checkbox">
        <p class="help-text align-center" id="editTitle">Edit</p>
    </div>
</div>

前后效果如下（两张图中右边缘均为网格的右边缘）：

之前：

之后：

问题：为什么会发生这种情况，我该如何解决？

P.S。我还没有完全弄清楚如何制作 jsfiddle 或 codepen 东西，因为我对网络东西相对较新（我通常在后端工作，但我的新工作需要前端的东西），对此感到抱歉。

更新：

我找到了 this answer，因为我注意到 .sticky.is-stuck classes 在 css 中设置了 position: fixed。我尝试了他们所说的，但只是将我的小切换一直放在 window 的右侧，而不是列的右侧。所以这不是一个选择。 :/

Answer 1

我想通了！

我没有将它以 small-4 的形式向右浮动以考虑所有不同尺寸的设备，而是将容器的宽度设置为比实际元素的尺寸 64px 大 30px（考虑到因为 Foundation 自动在那里填充）。我的容器代码最终看起来像这样：

<div class="columns" style="width: 94px;" data-sticky-container>

这样，"column"，可以说，粘性的东西正好是它里面的元素的大小，而它本身在行的 end .现在它在所有屏幕尺寸上都完美适配，位置正确！

基础粘性元素无视浮动类

Foundation sticky element disregards float classes

css

sticky

css-float

zurb-foundation

之前：

之后：

更新：

基础粘性元素无视浮动 类

Foundation sticky element disregards float classes

css

sticky

css-float

zurb-foundation

之前：

之后：

更新：

基础粘性元素无视浮动类