CSS to display a popup at 20px from top on a scrollable page

I have a page with 2 div - left and right. The left div is fixed and the right div is scrollable. I have a button on left div, which displays a popup(on right div) on click. Now I want that popup to be displayed always at 20px from the top of the page, even if the user has scrolled down on right div.

Currently I am using following code to position my div:

function showPopup()
{
    $('#popup').fadeIn('slow');
    //centering  
    $("#popup").css({  
    "width":'300',
    "height":'300',
    "position": "absolute",  
    "left": 280 ,
    "top":20
    });
}

This displays popup always at 20px from the absolute top of the page. So if the user have scrolled down on the right div, he won't be able to see the popup(unless he scroll all the way up).

Please guide me on how to display div at 20px from top relative to current scroll position.

Let me know if more explanation or code is required.


如果你将位置从absolute变为fixed你应该能够实现你想要的


Try position:fixed; for elements that won't move.


位置:固定应该为你做的伎俩:

function showPopup()
    {
        $('#popup').fadeIn('slow');
        //centering  
        $("#popup").css({  
        "width":'300',
        "height":'300',
        "position": "fixed",  
        "left": 280 ,
        "top":20
        });
    }
链接地址: http://www.djcxy.com/p/83842.html

上一篇: HTML页面中的独立列滚动

下一篇: CSS在可滚动页面上从顶部20px显示一个弹出窗口