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

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" >
            <p>Login</p>
        </div>
        
        <div id="line"></div> <!-- displays grey line between divs -->

        <div id="signup_div" >
            <p>Sign Up</p>
        </div>
    </div>

    <div id="terms_conditions"> <!--(divB)-->
        <p>Please view our T&C's</p>
    </div>

CodePudding user response：

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

CodePudding user response：

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" >
            <p>Login</p>
        </div>
        
        <div id="line"></div> <!-- displays grey line between divs -->

        <div id="signup_div" >
            <p>Sign Up</p>
        </div>
    </div>

    <div id="terms_conditions"> <!--(divB)-->
        <p>div b</p>
    </div>

CodePudding user response：

#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" >
            <p>Login</p>
        </div>
        
        <div id="line"></div> <!-- displays grey line between divs -->

        <div id="signup_div" >
            <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.