What is the way of the position CSS property affect its children?

Question

I want to make the position of PaginationBar-Wrapper and WriteButton-Wrapper (Both are children of Wrapper) relative to the parent but don't affect each other. After read this question in StackOverflow, I understand that position: absolute could be the answer for me.

According to the MDN, the position is property to set the position of itself, however, I find case that parent's position property affect children.

In the first case, It works perfectly for me.

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

.PaginationBar-Wrapper {
    position: static;
}

.WriteButton-Wrapper {
    position: absolute;
}

In the second case, it affects the children's height

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

.PaginationBar {
    position: static;
}

.WriteButton {
    position: absolute;
}

What's the difference between these two cases? What is the way of the position property affect its children?

Here is HTML structure of these code.

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