html - 当第一个兄弟元素具有绝对位置时，为什么前面的兄弟元素在顶部流动？

Question

我有两个同级 sections，并且在第一部分使用了 position:absolute 但第二部分出现在顶部。我在第二部分使用了 position:relative 但它不起作用。

这里是第一部分的 CSS:

#slideshow > figure {
    animation: imageAnimation 30s linear infinite 0s;
    backface-visibility: hidden;
    background-size: cover;
    background-position: center center;
    color: transparent;
    height: 100%;
    left: 0px;
    opacity: 0;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 0;
}

第二部分的 CSS:

#education {
    display: block;
    position: relative;
}

我希望第二部分在第一部分之后正常流动。

Answer 1

任何带有 position: absolute 的元素都会从元素流中移除——不会自动为它保留空间。 (relative 和 static 除外)

清除问题后的补充:要让第二部分在第一部分下方开始，请给它一个与第一(绝对定位)部分一样高的 margin-top。这会将其向下移动到第一部分下方。由于我不了解您其余的 CSS，因此无法提供更多详细信息。