How to float a box over the top and keep it right-top 1

[XgrinderX]

I know I have seen this done and for some reason no set of keywords that I use in Google or on Tek-Tips has produced a page with the solution I am looking for.

I have a div block that is hidden when the page loads. When the user clicks a button to show it, I want the block to open over the top of the current content on the page AND I want it to stay in the top right corner even as the page is scrolled.

Help please?

-Greg

 

[vacunita]

Set the div to be absolutely positioned to top right.

.floateddiv{
position:absolute;
top:0;
right:0;
}

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[XgrinderX]

I tried that already, that pegs the div to the top right but then it scrolls with the page, i.e. when you scroll down the div goes up and out of view. I want the div to always be in the top right corner - visible - even as the page scrolls.

 

[claudermilk]

Odd, that should work. It's exactly how I have locked some DIVs in position--and they behave like you are asking for.

 

[vacunita]

This is an example of a fixed header, if you change the dimensions it works as you want it to by using the position:fixed; after you've set it to absolute.

http://limpid.nl/lab/css/fixed/header

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[XgrinderX]

Vacunita!

I tweaked that code to my needs and got it to work. Funny enough I had actually stumbled across that site before when I was searching but did not think I could make it apply to what I was trying to do.

Thanks so much!

-Greg

 

[XgrinderX]

OK one other thing....how do I make my box cover a large select box. Apparently the select box gets rendered on top of my box. What's the trick?

 

[vacunita]

set the boxes overflow to hidden, and the select box's width to 100%. see if that works

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Vragabond]

You have two options. Since select boxes will always hover above anything else, you can:

1. Hide the select box whenever you are showing your fixed box.
2. Position an inframe on top of the select box, to make it hide behind your fixed box (because iframe exists above the select box and you can put other elements on top of an iframe -- strange, but it works). Technique is described here:

http://weblogs.asp.net/bleroy/archive/2005/08/09/how-to-put-a-div-over-a-select-in-ie.aspx

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]