Html （CSS）使元素高于所有元素，无论大小

我正在尝试为我的页面创建一个侧菜单

但是，正如您所看到的，侧菜单的高度将其后面的元素向下推。菜单本身是粘性的，这意味着当我滚动时，它会滚动到所有内容之上，而不会再按下任何其他内容

如果我将元素的高度设置为

.1em

或其他值，则不会再向下推任何内容，并且文本可见，但是，边框也会变得非常小。我需要的高度是自动的，以便边界完全包装文本

如何将高度设置为“自动”，但不向下推页面的其余部分？就像一个高于一切的元素，因此不会影响z-index:0上的其他内容

这就是我尝试过的：

.sideMenu {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: .5em;
    margin-top: 3em;
    margin-left: 1em;
    top: 10em;
    max-width: 15%;
    height: auto; 
    /*overflow-y: scroll;*/
    z-index: 100;
    position:sticky;
}

---

我实际上有两个解决方案

解决方案一

position:sticky

基本上使它在向下滚动时保持在原来的位置，但它仍然占据了以前的空间。要阻止这种情况发生，您可以使用

位置：fixed

，它不执行此操作

.sideMenu{
边界半径：25px；
边框：2px实心#73AD21；
填充：.5em；
边缘顶端：3em；
左边距：1米；
顶部：10em；
最大宽度：15%；
高度：自动；
/*溢出-y:滚动；*/
z指数：100；
位置：固定；
}

---

解决方案二 解决方案一的问题是，当您滚动到高于侧边栏的位置时，它不起作用。因此，您可以保留

位置：sticky

，但对定位进行更多修改，如

float:left

。我想你也可以用flexbox。这应该让他们并排走

.sideMenu{
边界半径：25px；
边框：2px实心#73AD21；
填充：.5em；
边缘顶端：3em；
左边距：1米；
顶部：10em；
最大宽度：15%；
高度：自动；
/*溢出-y:滚动；*/
z指数：100；
位置：粘性；
浮动：左；
}
.内容{
浮动：对；
}

那么，第二幅图像就是您想要的吗？是的，但这只发生在我滚动之后，我希望菜单位于标题“我们是谁”旁边。但它在滚动之前将其向下推：）只需写下你的答案：）太棒了！这两种解决方案都很有效，但第二种方案离开了起始位置，而第一种方案将对象推到了一切的开始位置。所以解决方案2真的很棒！非常感谢你！（我也投了票，但我还不够资格；-）