CSS:位于屏幕中央的位置加载指示器 [英] CSS: Position loading indicator in the center of the screen

问题描述

如何将加载指示器放置在屏幕中央.目前，我正在使用一个小占位符，它似乎可以正常工作.但是，当我向下滚动时，加载指示器将保持在该预定义位置.如何使它跟随滚动使其始终位于顶部?

How can I position my loading indicator in the center of the screen. Currently I'm using a little placeholder and it seems to work fine. However, when I scroll down, the loading indicator stays right in that predefined position. How can I make it follow the scrolling so that it always sits on top??

#busy
{
    position: absolute;
    left: 50%;
    top: 35%;
    display: none;
    background: transparent url("../images/loading-big.gif");
    z-index: 1000;
    height: 31px;
    width: 31px;
}

#busy-holder
{
    background: transparent;
    width: 100%;
    height: 100%;        
}

推荐答案

使用position:fixed代替position:absolute

第一个相对于您的屏幕窗口. (不受滚动影响)

The first one is relative to your screen window. (not affected by scrolling)

第二个相对于页面. (受滚动影响)

The second one is relative to the page. (affected by scrolling)

注意:IE6不支持position:fixed.

Note : IE6 doesn't support position:fixed.

这篇关于CSS:位于屏幕中央的位置加载指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！