Question

I need some advanced CSS help here. I have a login button and a register button, I only want one to show up at a time. If the user is not logged in, the register button should appear on top of the login button. We have a complex & crazy backend which will generate the code for the register button if the server thinks the user is not logged in. But both will be output by the server, the register button only if the user is logged in. Is there anything that can be done with absolute positioning to move one on top of the other?

Answer 1

Yes, there is.

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

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

But I don’t like doing this. For one thing, it removes you from the natural flow of the markup and forces you to position the button no matter what content comes above it. For another, what if the lower button is larger than the top? Then you have a problem with edges of the lower one visible.

Use Dominic’s solution above. It’s much better.