html - 固定元素被推下

Question

这是我正在构建的应用程序的一部分。有两列。第一列包含一首歌曲的歌词，第二列包含一些控制歌词列的一些属性的按钮。

Fiddle: default

<div id="content">
    <div class="column board">
        <div id="lyricsBox">
            <div id="song">Kryptonite - 3 Doors Down</div>
                <div id="lyrics">
                    <br><span style="color: DodgerBlue;">[Verse 1]</span>
                    <br>I took a walk around the world to ease my troubled mind
                    <!-- on and on...  see fiddle -->
                </div>
        </div>
    </div>
    <div class="column board" id="controls">
        <div id="lyrics_controls">
            <img src="images/ts_dark.png" id="textSelect" />
            <img src="images/center.png" id="align" />
            <div id="fontSize">
                <span class="up_down" id="increase">&#9650;</span>
                <span id="currentSize">15px</span>
                <span class="up_down" id="decrease">&#9660;</span>
            </div>
        </div>
    </div>
</div>

_{我决定不在这里发布 CSS 和 JS，因为它只会垃圾邮件问题，让它变长并吓到你。这就是为什么我隔离代码并创建具有不同状态的 fiddle 。如果有人建议我也应该包括它们，我会的。}

由于第二列比第一列短，如果我向下滚动它就会消失。我不想要那个。因此，我将第二列的位置更改为 fixed。这解决了问题，但导致了另一个问题。

如果我通过控制按钮更改歌词(第一)列的 text-align 或 font-size，第二列会被下推。

Fiddle: gets pushed down

为了解决这个问题，我在控制按钮中添加了另一行代码:

controls.style.position = "fixed";

因此，在更改第一列的 text-align 或 font-size 属性后，我将第二列的位置设置为 fixed，尽管它已经通过 CSS 设置为 fixed。

在Developers Tools中取消勾选第二列的position属性也可以解决问题。这让我想到了将 controls.style.position = "fixed"; 添加到控制按钮函数的末尾。

Fiddle: js fix

尽管我设法找到了使其工作的方法，但我想知道导致问题的原因。为什么第二列被压低了？为什么取消选中并选中它的位置属性可以修复它？

Answer 1

我同意@CBroe 的评论。规范未定义此类行为(没有顶部、左侧、右侧或底部的固定位置)，因此无法说明为什么要这样做。如果我进入开发工具并删除并再次添加固定定位，它会回到它应该在的位置，所以我认为这不是故意的(可能是 webkit 错误)，但无论如何，你应该分配方向属性与固定定位。它在这里有点毛茸茸，因为很难将它放在那个确切的位置，但考虑到你的第一列或多或少是固定宽度，你可以添加 right 或 left 50% 的属性并调整为负边距。例如:

position: fixed;
top: 48px;
right: 50%;
margin-right: -388px; /* about half of the left
                         columns ultimate width
                         including padding, margin,
                         etc. */

如果您的代码需要更动态(响应式或代码必须可与其他大小的容器一起使用)，您将需要添加不同的类、使用媒体查询、使用 javascript 来计算它，或使用这些的组合方法。

演示:fork of your fiddle演示上述 CSS