6.1.3　滑动元素

为了得到更多一些的视觉动作，可以把一个元素滑入或滑出视线。这些函数和淡化元素的函数类似，因为它们也是让页面元素从视线范围内出现或消失，并且也可能有一个速度值。

·slideDown（）使得一个隐藏的元素滑入视线。首先，元素的顶部出现，并且随着元素其他部分的出现，元素下面的任何内容都向下推动。如果元素在页面上已经可见，它不会有任何效果。如果没有提供一个速度值，元素会使用“常规”设置（400毫秒）滑入。

·slideUp（）通过隐藏元素的底部并且把元素之下的任何内容向上移动，直到元素消失，从而把元素从视线中移除。如果元素已经是隐藏的，它和slideDown（）函数一样不会有任何效果。如果没有提供一个速度值，元素会在400毫秒内滑出。

·如果元素当前是隐藏的，slideToggle（）应用slideDown（）函数；如果元素是可见的，则使用slideUp（）函数。这个函数允许用一个单独的控件（按钮）来显示和隐藏一个元素。

快速学习CSS的绝对定位

通常，当隐藏Web页面上的一个元素时，其他的元素会移动过来填充这一空白。例如，如果隐藏了页面上的一幅图像，该图像消失，图像下面的内容会移动到页面上边。同样，让一个元素出现，会迫使其他的内容为新显示的元素腾出位置。你可能不想让页面上的内容像这样跳来跳去。在这种情况下，可以使用CSS和绝对定位，把一个元素放置在常规页面内容流之外。换句话说，使用CSS的position属性，可以让div、图像或段落出现在页面的顶部，就好像它位于自己单独的层上一样。

要让一个元素出现在页面之上，给它一个单独的position值。可以使用left、right、top和bottom属性来指定该元素在页面上的位置。例如，假设有一个＜div＞标签，它包含一个登录表单。这个登录表单通常不显示，但是，当访问者单击了一个链接，该表单就会滑动显示于该位置，刚好位于页面其他内容之上。可以像下面这样定位该div：

login{

position：absolute；

left：536px；

top：0；

width：400px；

}

这个样式将div放在浏览器窗口顶部，且距离左边界536像素。可以使用right属性来将元素放在距离右边界一定像素的位置，或者，使用bottom属性来确定它和浏览器窗口底边的位置关系。

当然，你可能想要相对于浏览器窗口以外的某些内容来放置一个元素。例如，弹出的工具提示通常都相对于某个其他元素来定位的：页面上的一个单词后面可能跟着一个"?"，当单击这个"?"的时候，会打开一个小的对话框，其中带有针对该单词的定义。在这种情况下，工具提示不会相对于浏览器窗口的顶端、左边、右边或底部来定位，而是紧挨着该单词。要实现这一点，需要相对于一个元素来提供定位，而该元素包含了绝对定位的项目。例如，看如下这段HTML：

＜span class="word"＞Heffalump

＜span class="definition"＞An

imaginary, el-

elephant-like creative from Winnie the

Pooh＜/span＞

＜/span＞

要让definition span出现在单词的下方，首先需要相对地定位word span，然后，像下面这样绝对定位definition：

.word{position：relative；}

.definition{

position：absolute；

bottom：-30px；

left：0；

width：200px；

}

有关绝对定位的更多信息，请访问www.elated.com/articles/css-positioning/，或者参考《CSS：The Missing Manual》一书。