html - 位置 CSS 属性影响其子级的方式是什么？

Question

我想让PaginationBar-Wrapperand WriteButton-Wrapper（两者都是 的子级Wrapper）相对于父级的位置，但不会相互影响。在 StackOverflow 中阅读了这个问题后，我明白这position: absolute可能是我的答案。

根据 MDN，位置是设置自身位置的属性，但是，我发现父级的位置属性会影响子级的情况。

在第一种情况下，它非常适合我。

.Wrapper {
    position: relative;
    flex-direction: row-reverse
}

.PaginationBar-Wrapper {
    position: static;
}

.WriteButton-Wrapper {
    position: absolute;
}

第二种情况，影响孩子身高

.Wrapper {
    position: static;
    flex-direction: row-reverse
}

.PaginationBar {
    position: static;
}

.WriteButton {
    position: absolute;
}

这两种情况有什么区别？位置属性影响其子级的方式是什么？

这是这些代码的 HTML 结构。

 <div className="Wrapper">
    <div className="PaginationBar-Wrapper">
      <PaginationBar />
    </div>
    <div className="WriteButton-Wrapper">
      <button className="write-button">작성하기</button>
    </div>
 </div>

标签： htmlcss