将绝对定位设置为左：50％时，页面加倍

Question

我将按钮#login和#register设置为position: absolute;，值left: 50%，但每当我执行此操作时，所有内容都在页面在原始页面下方翻倍。

    header {
        background-image:url("");
        pading:1vh 2vw;
        height:98vh;
        width:96vw;
    }
    
    .title {
        position:absolute;
        left:5px;
        top:5px;
    }
    
    #register {
        background-color:#66ff66;
        color:#595959;
    }
    
    #login {
        background-color:#4dd2ff;
        color:#595959;
    }
    
    #login, #register {
        width:300px;
        height:35px;
        border:0;
        border-radius:8px;
        position:absolute;
        left:50%;
    }

Answer 1

<强>问题

• 您的代码中有两次关闭</header>
• 您的id并不是唯一的，很可能是因为您将代码翻倍/重复了
• 你的css中有一个拼写错误padding而不是pading
• 另外，您应该将position:relative添加到您的孩子所在的父级position:absolute，否则将无法关注DOM

备注

• 避免使用内联样式
• 不要使用多个 来创建空间，而是使用margin/padding
• 在margin中重置body以避免水平滚动条

＆＃13;

＆＃13;

body {
  margin:0
}
header {
  background-image: url("");
  padding: 1vh 2vw;
  height: 98vh;
  width: 96vw;
}
#register {
  background-color: #66ff66;
  color: #595959;
}
#login {
  background-color: #4dd2ff;
  color: #595959;
}
#login,
#register {
  width: 300px;
  height: 35px;
  border: 0;
  border-radius: 8px;
  position: absolute;
  left: 50%;
}
/* new */

.p-header {
  position: relative
}
#content-header-home h1 span:first-of-type {
  color: #000
}
#content-header-home h1 span:nth-of-type(2) {
  color: #737373
}
#content-header-home h1 span:last-of-type {
  color: #ccc
}
#changing {
  margin-left: 10px;
}

＆＃13;

<header>
  <div id="content-header-home">
    <h1><span>Team</span><span>Builder</span> <span>.com</span></h1>
    <p class="p-header">Your<span id="changing"> is just a few steps away!</span>
    </p>
    <div class="buttons-home" id="buttons-home">
      <button id="register">Create an Account</button>
      <p>OR</p>
      <button id="login">Login</button>
    </div>
  </div>
  <!-- End header content -->
</header>

＆＃13;

＆＃13;

＆＃13;