为什么 position：已修复； 不在 CSS 中工作？

Question

我正在制作 HTML 和 CSS 的演示。 我的页面内容不多，但有侧边栏和抽屉。 我在侧边栏中面临一个问题。

我将以下 CSS 应用到我的侧边栏：

.sidebar {
    margin: 0;
    padding: 0;
    width: 250px;
    background-color: #f1f1f1;
    position: fixed;
    right: 0;
    height: 100%;
    overflow: auto;
}

之后，我应用display: flex; 父div元素的属性现在我的侧边栏显示在右侧。

我的问题是：为什么我需要display: flex; 让我的侧边栏正确显示？

这是我的代码的链接

Answer 1

您需要添加top: 0; 到您的.sidebar class，然后您可以移除display: flex; .