I need the orange box to be hidden behind the red box, regardless the size of the orange box, until the event is triggered. Neither display:hidden & overflow:hidden work as I hoped it would. Below is a jsFiddle example.

 

[Link]

display:hidden; is not valid CSS, try display:none;

I am on mobile now so I can't have a proper look at your fiddle, will have a look later.

Edited September 1, 201411 yr by teodora

Right

 

display:hidden; is not valid CSS, try display:none;
I am on mobile now so I can't have a proper look at your fiddle, will have a look later.

That is what I meant to write, thanks for taking the time !

Great to hear it's sorted

I meant thanks for taking the time to look at the code, it is not resolved !

Why not set the orange element hidden from the page by giving it a negative x000 top position.

 

I have updated your script:

http://jsfiddle.net/uL8z4p1h/2/

Why not set the orange element hidden from the page by giving it a negative x000 top position.

 

I have updated your script:

http://jsfiddle.net/uL8z4p1h/2/

 

You have hit the target Thank you, superb !

D4Y0 - Maybe I did something, maybe it's not reacting the same way on the actual site, as it is on JsFiddle. Would you mind to take a look at the actual site ? What is happening is the the div is not hiding behind, it is sliding up from the bottom of the browser, instead of behind the red box, as seen on the JsFiddle code.

Sur just PM me the link