Javascript 切换按钮无法工作

var mylogin=document.getElementById（'login'）//登录页面的表单id
var myRegister=document.getElementById（'register'）//注册页面的表单id
var mybtn=document.getElementById（'btn'）//要执行切换选项的btn id
登录=（）=>{
mylogin.style.left='50px'；
myRegister.style.left='500px'；
mybtn.style.left='0px'；
}
寄存器=（）=>{
mylogin.style.left='-450px'；
myRegister.style.left='50px'；
mybtn.style.left='110px'；
}

*{
保证金：0；
填充：0；
字体系列：无衬线；
}
/*设置背景容器的步骤*/
.集装箱{
身高：115%；
宽度：100%；
背景图像：url（'../Images/conifeers.jpg'）；
位置：绝对位置；
背景位置：中心；
}
/*创建白盒的步骤*/
.form_容器{
宽度：380px；
高度：480px；
位置：相对位置；
利润率：6%；
背景：白烟；
填充物：5px；
溢出：隐藏；
}
/*为阴影效果创建按钮的容器*/
.按钮组{
宽度：220px；
保证金：34px自动；
位置：相对位置；
盒影：0 0 8px 8px暗绿色；
边界半径：30px；
}
/*按钮样式*/
.toggle_btn{
填充：10px 25px；
背景：无；
边界：0；
大纲：无；
位置：相对位置；
光标：指针；
}
/*用于切换按钮的样式*/
#btn{
排名：0；
左：0；
位置：绝对位置；
宽度：110px；
身高：100%；
背景：线性渐变（向右，浅绿色，绿色）；
边界半径：30px；
过渡：.5s；
}
/*图标背景容器*/
.媒体图标{
保证金：30像素自动；
文本对齐：居中；
}
/*图标图像样式*/
.media_图标img{
宽度：35px；
边际：0.12px；
盒影：0 0 10像素2像素橄榄色；
光标：指针；
边界半径：50%；
}
/*造型*/
.form_组{
顶部：180像素；
位置：绝对位置；
宽度：280px；
过渡：.5s；
}
/*对于输入类型=文本框中的文本*/
.输入区{
宽度：100%；
填充：10px0；
保证金：5px0；
边界：0；
边框底部：1px纯蓝色；
大纲：无；
背景：无；
}
.复选框{
利润率：30px 10px 30px 0；
}
跨度{
颜色：rgb（36,21,22）；
字体大小：14px；
底部：65px；
}
.sub_btn{
宽度：80%；
填充：10px 30px；
光标：指针；
显示：块；
保证金：自动；
背景：线性渐变（向右，浅绿色，绿色）；
边界半径：30px；
边界：0；
大纲：无；
}
#登录{
左：50px；
}
#登记册{
左：500px；
}

登录
登记
记得我吗
登录
我同意所有条款和条件
登记

我更改了以下代码

#login {
  left: 50px;
}

#register {
  left: 500px;
}

用这个

#login {
    left: 50px;
    position: relative;
}

 #register {
   left: 500px;
   top: 150px;
   position: absolute;
 }

我给了

#登录

职位：相对

因此它保持容器高度，但现在您可以使用

left

我给了

#寄存器

位置：absulute

以便您可以将其放置在以前启用切换的

#login

位置

var mylogin=document.getElementById（'login'）//登录页面的表单id
var myRegister=document.getElementById（'register'）//注册页面的表单id
var mybtn=document.getElementById（'btn'）//要执行切换选项的btn id
登录=（）=>{
mylogin.style.left='50px'；
myRegister.style.left='500px'；
mybtn.style.left='0px'；
}
寄存器=（）=>{
mylogin.style.left='-450px'；
myRegister.style.left='50px'；
mybtn.style.left='110px'；
}

*{
保证金：0；
填充：0；
字体系列：无衬线；
}
/*设置背景容器的步骤*/
.集装箱{
身高：115%；
宽度：100%；
背景图像：url（'../Images/conifeers.jpg'）；
位置：绝对位置；
背景位置：中心；
}
/*创建白盒的步骤*/
.form_容器{
宽度：380px；
高度：480px；
位置：相对位置；
利润率：6%；
背景：白烟；
填充物：5px；
溢出：隐藏；
}
/*为阴影效果创建按钮的容器*/
.按钮组{
宽度：220px；
保证金：34px自动；
位置：相对位置；
盒影：0 0 8px 8px暗绿色；
边界半径：30px；
}
/*按钮样式*/
.toggle_btn{
填充：10px 25px；
背景：无；
边界：0；
大纲：无；
位置：相对位置；
光标：指针；
}
/*用于切换按钮的样式*/
#btn{
排名：0；
左：0；
位置：绝对位置；
宽度：110px；
身高：100%；
背景：线性渐变（向右，浅绿色，绿色）；
边界半径：30px；
过渡：.5s；
}
/*图标背景容器*/
.媒体图标{
保证金：30像素自动；
文本对齐：居中；
}
/*图标图像样式*/
.media_图标img{
宽度：35px；
边际：0.12px；
盒影：0 0 10像素2像素橄榄色；
光标：指针；
边界半径：50%；
}
/*造型*/
.form_组{
顶部：180像素；
位置：绝对位置；
宽度：280px；
过渡：.5s；
}
/*对于输入类型=文本框中的文本*/
.输入区{
宽度：100%；
填充：10px0；
保证金：5px0；
边界：0；
边框底部：1px纯蓝色；
大纲：无；
背景：无；
}
.复选框{
利润率：30px 10px 30px 0；
}
跨度{
颜色：rgb（36,21,22）；
字体大小：14px；
底部：65px；
}
.sub_btn{
宽度：80%；
填充：10px 30px；
光标：指针；
显示：块；
保证金：自动；
背景：线性渐变（向右，浅绿色，绿色）；
边界半径：30px；
边界：0；
大纲：无；
}
#登录{
左：50px；
位置：相对位置；
}
#登记册{
左：500px；
顶部：150px；
位置：绝对位置；
}

登录
登记
记得我吗
登录
我同意所有条款和条件
登记

我更改了以下代码

#login {
  left: 50px;
}

#register {
  left: 500px;
}

用这个

#login {
    left: 50px;
    position: relative;
}

 #register {
   left: 500px;
   top: 150px;
   position: absolute;
 }

我给了

#登录

职位：相对

因此它保持容器高度，但现在您可以使用

left

我给了

#寄存器

位置：absulute