具有 position: relative 的元素不应该是正常文档流的一部分吗？

Question

我有一个组件，它有一个带 position: relative 的 div 和一个带 position: absolute 嵌套在其中的 div。当我将该元素引入我的其他组件时，它们会重叠。

这是第一个组件：

<div className={classes.positionRelative}>
    <div className={classes.absoluteList}>
        <div className={classes.flexWrapper}>
            <img
                className={classes.coinImg}
                src={currentCoin}
                alt='current coin'
            />
            <input
                className={inputSizeDecider}
                onChange={storeInputText}
            />
            <img src={search} alt='search icon' />
        </div>
        {inputText != '' && (
            <ul>
                {coins &&
                    coins
                        .filter(coin => {
                            if (
                                coin.name
                                    .slice(0, inputText.length)
                                    .toLowerCase() ==
                                inputText.toLowerCase()
                            ) {
                                return coin;
                            }
                        })
                        .map((coin, i) => (
                            <div key={`div${i}`}>
                                <img
                                    src={coin.image}
                                    alt='coin logo'
                                    key={`img${i}`}
                                />
                                <p key={`p${i}`}>{coin.name}</p>
                            </div>
                        ))}
            </ul>
        )}
    </div>
</div>

css:

.positionRelative {
    position: relative;
}

.absoluteList {
    display: flex;
    padding: 2px;
    width: 50vw;
    flex-direction: column;
    align-items: top;
    position: absolute;
    border: solid 1px #707070;
    border-radius: 10px;
}

.flexWrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.flexWrapper > input {
    width: 20vw;
    padding-left: 2vw;
    flex-grow: 1;
    border-style: none;
    outline: none;
    overflow: hidden;
}

.coinImg {
    height: 2.5vh;
}

第二个组成部分（没有css）

<div>
    <Searchbar />
    <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio
        adipisci facilis sapiente incidunt laboriosam provident esse
        eius ut, odio doloremque magni! Earum voluptates distinctio qui
        sint temporibus assumenda nobis vero.
    </p>
</div>

当我运行这个

时，搜索栏组件和段落只是堆叠在一起

Answer 1

您的 .positionRelative 元素没有任何其他子元素，除了 .absoluteList – 它有 position:absolute.

但是具有 position:absolute 的元素不带任何 space 自己的 ！因此，您的 .positionRelative 呈现为没有内容的元素，因此高度为零。（使用浏览器工具检查它，然后您就会看到它）。因此，其绝对定位的子元素将与文档流中的 other 元素重叠。

因此，为了为 .absoluteList 创建 space，您必须为 .positionRelative 元素定义一个手册 height。

或者，考虑从 .absoluteList 中删除 position:absolute，因此它被视为 .positionRelative 的常规内容。

具有 position: relative 的元素不应该是正常文档流的一部分吗？

Shouldn't an element that has position: relative be a part of the normal document flow?

css

css-position