CODEWITHSUNDEEP
csscss-position
Volomike
Volomike

Reputation: 24896

How To Properly Switch from Absolute Positioning to Fixed

I am having a problem where I position a dialog with "position:absolute" and it works fine putting it in the center of the screen. But then I switch "position:absolute" with "position:fixed" after that and it causes the position to not be in the center. (I'm using latest stable Google Chrome I have.)

What's the trick so that when I make this switch, it will always be in the center?

Upvotes: 0

Views: 302

Answers (1)

Sarfraz
Sarfraz

Reputation: 382806

You need to use these styles to make it appear dead-center:

position:fixed;
top:50%;
left:50%;
width:400px;  /* adjust as per your needs */
height:400px;   /* adjust as per your needs */
margin-left:-200px;   /* half of width above */
margin-top:-200px;   /* half of height above */

So position should be specified. The top and left should be 50%. The margin-left and margin-top should be negative one half of the width and height of the box respectively.

Notice that position:fixed does not work in IE6.

Upvotes: 1

Related Questions