Why does div display above div with display:flex - html

Question

I have a div (divA) which has the style "display:flex" and another div (divB) without any positioning styles/properties which displays itself above divA even when divB comes after divA inside my HTML file.
(Someone who is relatively new to CSS so please excuse any poor/confusing terminology)
#login_or_signup {
display: flex;
top: 30%;
position: relative;
}
#terms_conditions {
text-align: center;
}
<div id="welcome_div">
<h1>Hi. Welcome to Website name</h1>
<p>Please Login or Sign up</p>
</div>
<div id="login_or_signup"> <!--(divA)-->
<div id="login_div" class="select_options borders">
<p>Login</p>
</div>
<div id="line"></div> <!-- displays grey line between divs -->
<div id="signup_div" class="select_options borders">
<p>Sign Up</p>
</div>
</div>
<div id="terms_conditions"> <!--(divB)-->
<p>Please view our T&C's</p>
</div>

Answer 1

By using 'top: 30%' you are forcing position of that div.

Answer 2

by using relative top:30% DOES NOTHING. If you used position:absolute it would reposition the element. Your code seems to work just fine.
#login_or_signup {
display: flex;
top: 30%;
position: relative;
}
#terms_conditions {
text-align: center;
}
<div id="login_or_signup">div a <!--(divA)-->
<div id="login_div" class="select_options borders">
<p>Login</p>
</div>
<div id="line"></div> <!-- displays grey line between divs -->
<div id="signup_div" class="select_options borders">
<p>Sign Up</p>
</div>
</div>
<div id="terms_conditions"> <!--(divB)-->
<p>div b</p>
</div>

Answer 3

#login_or_signup {
display: flex;
}
#terms_conditions {
text-align: center;
}
<div id="welcome_div">
<h1>Hi. Welcome to Website name</h1>
<p>Please Login or Sign up</p>
</div>
<div id="login_or_signup"> <!--(divA)-->
<div id="login_div" class="select_options borders">
<p>Login</p>
</div>
<div id="line"></div> <!-- displays grey line between divs -->
<div id="signup_div" class="select_options borders">
<p>Sign Up</p>
</div>
</div>
<div id="terms_conditions"> <!--(divB)-->
<p>Please view our T&C's</p>
</div>
I changed your CSS rules to fix the problem.
Removing position: relative; resolves the positioning issue.