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:
How do I make the login box ALWAYS appears above anything on a page?
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 ).
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.
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.
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.
Some code would be nice... anyway try with z-index:
#login-box-id {
z-index:99999;
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With