Question

我正在尝试创建一个水平位置：我网站顶部的固定行。布局是两个垂直列。左边是固定菜单栏，右边是滚动内容。水平固定线穿过滚动内容的顶部。

我创建了一条垂直线来划分这些列，如下所示：

HTML：

<div id="vline"></div>

CSS：

#vline {
    min-width: 1px;         /* thickness of line */
    width: 1px;         /* thickness of line */
    height: 300px;          /* length of line (down) */
    background-color: #959595;  /* Line color */
    margin-left: 205px;     /* locating on page */
    position: fixed;        /* fix to window */
    }

但是，当我添加位置：固定在水平线上时，它就会消失。显然，将其保留在正常流程中或尝试通过任何其他方式（绝对或相对）定位它会使其与滚动内容的其余部分一起滚动。我认为这可能是一个问题，所以我也尝试定义一个边框，如下所示：

HTML：

<div id="hline"></div>

CSS：

    #hline {
    border-top: 1px solid #959595;
    width: auto;            /* width match window size */
    margin-left: 205px;     /* locating on page */
    margin-bottom: 5px;     /* offset for text content bellow */
    position: fixed;
}

这与使用线路有同样的问题。它工作正常，线条出现在我想要的位置，在滚动列的顶部，但直到我添加位置：固定它当然会滚动内容。一旦我添加位置：固定，它就会消失。

除非我做了一些明显错误的事情，或者还有另一种方法来定位它我没有尝试过，我唯一能想到的是它是一个浏览器呈现错误。我使用的是最新版本的Google Chrome。

感谢您的帮助！

Answer 1

使用顶部和左侧放置条形图。例如，

 #hline, #vline{top: 0; left: 0;}

应该这样做。您可能会遇到一些轻微的宽度问题。我建议用％来代替硬编码px。

位置：固定时，线条和边框消失。 CSS和Google Chrome问题？

1 个答案: