:before 伪元素在绝对定位时不停留在 div 中

如何解决:before 伪元素在绝对定位时不停留在 div 中

嗨，我有一个叠加层，我正在尝试开始工作。叠加层不会停留在其父级内，只是有点漂浮。我在 Firefox 上使用控制台，它告诉我它“不是定位元素”，尽管我使用的是绝对位置。

greyed-out::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background: rgba(0,0.5);
    z-index: 999;

.greyed-out {
    overflow: hidden;
    border: solid 1px black;

解决方法

这里的问题是父元素没有设置为相对位置。正确的 css 应该是：

.greyed-out::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background: rgba(0,0.5);
    z-index: 999;

.greyed-out {
    background: rgba(0,0.5);
    z-index: 2;
    overflow: hidden;
    border: solid 1px black;
    position: relative; <<< this is needed
}

,

您的 div 位置需要设置为 relative。您还缺少一些右大括号：

greyed-out::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background: rgba(0,0.5);
    z-index: 999;
}

.greyed-out {
    overflow: hidden;
    border: solid 1px black;
}