当位置：固定时，线条和边框消失。 CSS 和谷歌浏览器问题？

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 */
    }

但是，当我将 position:fixed 添加到水平线时，它就消失了。显然，让它保持正常流动或尝试通过任何其他方式（绝对或相对）定位它会导致它与其余滚动内容一起滚动。我认为这可能是线条的问题，所以我也尝试定义一个边框，如图所示：

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;
}

这与使用线有相同的问题。它工作正常，该行出现在我想要的位置，在滚动列的顶部，但是在我添加 position:fixed 之前，它当然会随着内容滚动。一旦我添加位置：固定，它就会消失。

除非我做了明显错误的事情，或者我没有尝试过另一种定位方式，否则我唯一能想到的就是它是浏览器渲染错误。我使用的是最新版本的谷歌浏览器。

感谢您的帮助！

Answer 1

使用顶部和左侧定位条形。 例如，

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

应该这样做。您可能会遇到一些小的宽度问题。我建议用 % 而不是硬编码 px 来做所有事情。