Position a button over another using CSS

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

Why put one on top of the other? There's a "proper" way of hiding things in CSS, using the display property:

.register_button { display: none; }

Then, in your HTML:

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

Answer 2

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.

Answer 3

First you need to inspect id of the element using tool like firebug (addon of firefox) then you need to use that id in css to position it, let's suppose the button has id myid, you should do this in CSS:

#myid
{
  position:absolute;
  top:100px; /* adjust this */
  left:100px; /* adjust this */
}