Javascript 带有css的玉石按钮不'；行不通

我正在尝试使登录和注册按钮在我的页面上工作。当登录按钮的代码位于顶部时，则登录按钮不工作；当注册按钮的代码位于顶部时，则注册按钮不工作

extends layout

block content
  h1= title
  p Welcome to #{title}
  br
  br
  body
  div(id="banner2")
  div(id="signin")
    form#SignIn(name="sign in", method="get", action="signin")
        button#btnSignIn(type="submit") Sign In
  div(id="register")
    form#Register(name="register", method="get", action="register")
        button#btnRegister(type="submit") Register

这是我的css文件中用于这些按钮的代码：

#register{
    position: absolute;
    right: 180px;
    padding: 110px;
    top: 20px;
    width: 100px;
}
#signin{
    position: absolute;
    right: 240px;
    padding: 110px;
    top: 20px;
    width: 100px;
}

看起来是这样的：

使用上面的代码，“登录”按钮不起作用

---

请帮我让两个按钮都工作

您需要更改css，首先删除

填充：110px右侧：240px

更改为

右侧：300px用于
#btnSignIn
（单击运行代码片段）-


#btnRegister{
位置：绝对位置；
右：180px；
顶部：20px；
宽度：100px；
}
#btnSignIn{
位置：绝对位置；
右：300px；
顶部：20px；
宽度：100px；
}
登录
注册
您是否将表单定位为相对位置（否则，您的按钮看起来会相互重叠）？还可以发布呈现的html。您的表单中还会有其他输入吗？如果不是的话，你可以用链接来代替，这看起来似乎是无关紧要的，但是双br后的“身体”做什么呢？我觉得有点可疑。另外，“type”不是一个有效的表单属性。我只是在文本和下面的横幅之间添加了br。我还将“type”改为“name”，但仍然没有成功。