Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Positioning Above all elements

Tags:

So I have a small login box that appears when clicking the login button. The problem is that when it appears, it appears behind everything else on the page. This is what it looks like: Login

How do I make the login box ALWAYS appears above anything on a page?

like image 876
Michael Benneton Avatar asked Oct 01 '12 09:10

Michael Benneton


People also ask

How do you put an element above another in CSS?

You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).

How do I get the top position of a div in CSS?

The top property affects the vertical position of a positioned element. This property has no effect on non-positioned elements. If position: absolute; or position: fixed; - the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor.

What will be the order of CSS positioning?

Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

How do I make a div appear on top of everything?

Set the DIV's z-index to one larger than the other DIVs. You'll also need to make sure the DIV has a position other than static set on it, too. position relative and z index set to 999999999999999999999999999999999999999999999999999.


2 Answers

Some code would be nice... anyway try with z-index:

#login-box-id {
    z-index:99999;
}
like image 97
Giona Avatar answered Oct 24 '22 19:10

Giona


you need to apply some z-indexing,

I assume you have a position set to either absolute or relative or fixed, if so, add this too

z-index:2;

If you want more help please provide some CSS/html and i can show you exactly where it needs to go.

like image 23
CᴴᵁᴮᴮʸNᴵᴺᴶᴬ Avatar answered Oct 24 '22 19:10

CᴴᵁᴮᴮʸNᴵᴺᴶᴬ