CODEWITHSUNDEEP
asp.netcssfancybox
john
john

Reputation: 4158

Centering fancybox with position:aboslute not letting me change location

I have a fancybox that pops up when I click on a link. It opens up somewhere around the center area, however not quite in the middle. The css for the fancybox is:

#fancybox-wrap {
    position:absolute;
    /*padding: 20px;*/
    z-index: 1101;
    outline: none;
    display: none;
    margin: 0px auto 0px auto;
}

However, when I have position:absolute;, the margin settings become void. Nothing seems to work. left: 50px;, etc won't work. Any ideas?

When I change absolute to relative the fancybox is perfectly in the middle where I want it, but it draws the fancybox almost out of view at the bottom.

Upvotes: 1

Views: 448

Answers (1)

Sam
Sam

Reputation: 10113

When you are positioning something absolutely, you are telling the browser exactly where you want it drawn based on top/bottom and left/right attributes.

To absolutely position in the center of the screen:

#fancybox-wrap {
    position:absolute; /* want it positioned absolutely relative to parent */
    width:500px;       /* fixed width of 500px */
    top:50px;          /* 50px down from the top of the screen */
    left:50%;          /* positioned in the middle of the screen */
    margin-left:-250px;/* use a negative margin of half the fixed width */
}

Upvotes: 1

Related Questions