Problema CSS

Front-end HTML
#1

Estou iniciando em HTML e CSS e não sei configurar certinho a posições dos objetos na pagina.
Meu CSS:

#Register_BackGround_Img{

width: 400px;
position: fixed;
top: 19%;
right: 42%;
height: 450px;
box-shadow: 2px 2px 8px black;

}

#Register_Position0_BackGround{

}

#Register_Position1{

}

#Register_Img_Logo{
position: fixed;
width: 184px;
height: 64px;
top: 20%;
right: 50%;
}
#Register_Input_Name{
position: fixed;
height: 26px;
top: 29%;
width: 236px;
right: 50%;
}
#Register_Input_Email{
    position: fixed;
height: 26px;
width: 236px;
top: 36%;
right: 50%;
}
#Register_Input_Pass{
    position: fixed;
height: 26px;
width: 236px;
top: 44%;
right: 50%;
}
#Register_Input_ConfirmPass{
    position: fixed;
height: 26px;
width: 236px;
top: 52%;
right: 50%;
}
#Register_Button{
    position: fixed;
height: 33px;
width: 106px;
top: 59%;
right: 50%;
}

Meu HTML:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Cadastre-se</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link rel="stylesheet" href="Register_CSS.css">
        
    </head>
    <body>
        
        <div id="Register_Position0_BackGround">
            <img id="Register_BackGround_Img" src="Images/BackGround_White.png" alt=""/>
       </div>
        
        <div id="Register_Position1">
            
            <img id="Register_Img_Logo" src="Images/Logo.png" alt="Logo"/>

            <input id="Register_Input_Name" type="text" name="Name" value="" />
            <input id="Register_Input_Email" type="text" name="Email" value="" />
            <input id="Register_Input_Pass" type="password" name="Pass" value="" />
            <input id="Register_Input_ConfirmPass" type="text" name="ConfirmPass" value="" />
            
            <input id="Register_Button" type="submit" value="Cadastrar" />
            
        </div>
    
    </body>
</html>

Pagina:

Como podem ver esta tudo bugado.
Os objetos não ficam em seu devido lugar quando eu mexo na pagina.
Como posso arrumar isso?
E como eu faco para usar porcentagem normalmente na pagina, quando eu coloco top : 50%; o Objeto não vai realmente para a metade da pagina.

#2

A primeira coisa: não use position: fixed tão descaradamente. Ele vai ser útil em situações especificas, mas certamente não deveria ser usado como vc usou.

O que acontece é que cada elemento já é naturalmente posicionado um após o outro em sequencia.

No caso dos seus inputs, bastava mudar o display pra block e ajustar as margens superior e inferior pra conseguir o posicionamento desejado.

Da mesma forma, vc poderia ter evitado algum retrabalho se usasse classes ao invés de ids.

Bom, minha sugestão de melhoria é essa:

https://codepen.io/wldomiciano/pen/dLKWdB

1 curtida