Fixing Overlapping Elements

Question

I've been trying to properly place an element into my page so that it doesn't obstruct the background and so that it aligns all the way to right. I've tried to recreate the scenario on this jsfiddle, but I couldn't recreate it exactly.

There is a lot of junk included, but to create the layout of the actual page, I had to included it. My problem is with .login in the style and how it is interacting with the other elements. I've tried screwing with position, but I haven't been able to achieve my desired result.

Here is a screenshot of what it looks like with the problem:

This is what I would like:

Thanks for any help!

Answer 1

Try this

.login {
    position: absolute;
    top: 0; // or what you need
    right: 0;
    z-index: 1; // i don't know if you need upper value for that
}