使用CSS将按钮放在另一个按钮上

Question

我需要一些高级的CSS帮助.我有一个登录按钮和一个注册按钮,我只希望一次显示一个.如果用户未登录,则注册按钮应显示在登录按钮的顶部.我们有一个复杂而疯狂的后端,如果服务器认为用户没有登录,它将生成注册按钮的代码.但两者都将由服务器输出,仅当用户登录时才会输出注册按钮.有什么用可以通过绝对定位将一个移到另一个上面吗？

Answer 1

为什么要把一个放在另一个之上？使用display属性有一种"适当"的方式隐藏CSS中的东西:

.register_button { display: none; }

然后,在您的HTML中:

<button type="button" class="register_button">Will not show up!</button>

Answer 2

就在这里。

.button1 {
  position: absolute;
  left: 100;
  top: 100;
  z-index: 1000;
}

.button2 {
  position: absolute;
  left: 100;
  top:100;
 z-index: 1001;
}

但我不喜欢这样做。一方面，它将您从标记的自然流中移除并强制您定位按钮，无论它上面有什么内容。另一方面，如果下部按钮比顶部大怎么办？然后你有一个问题，较低的边缘可见。

使用上面的多米尼克解决方案。好多了。