Question

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

<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，因为它只是垃圾邮件问题，让它更长，吓唬你。这就是我为什么要隔离代码并创建具有不同状态的小提琴的原因。如果有人建议我也应该包括它们，我会。}

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

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

Fiddle: gets pushed down

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

controls.style.position = "fixed";

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

取消选中并检查Developers Tools中第二列的position属性也可以解决问题。这让我想到了将fixed添加到控制按钮功能的末尾。

Fiddle: js fix

即使我设法找到一种方法使其发挥作用，我想知道导致问题的原因。为什么第二列被推下来？为什么取消选中并检查它的位置属性会修复它？

Answer 1

我同意@ CBroe的评论。这种行为（没有顶部，左侧，右侧或底部的固定位置）是由规范定义的，所以不知道它为什么这样做。如果我进入开发工具并删除并再次添加固定定位，它会回到它应该的位置，所以我不认为这是故意的（也许是webkit错误），但无论如何，你应该分配方向属性具有固定的定位。这里有点毛茸茸，因为很难将它放在那个确切的位置，但考虑到你的第一列或多或少是固定宽度，你可以添加right或left属性{{1 }和adjust是负边距。例如：

50%

如果您的代码需要更加动态（响应或代码必须可以使用其他大小的容器重用），您将需要添加不同的类，使用媒体查询，使用javascript来计算它，或者使用这些的组合方法

演示：fork of your fiddle演示上面的CSS

固定元素被推下来

1 个答案: