站長資訊網(wǎng)css中可以使用position屬性設(shè)置元素不隨滾動條滾動，語法“position:fixed”。position屬性規(guī)定元素的定位類型，當值為fixed時，元素以相對瀏覽器窗口進行定位，無論怎樣移動滑動條，都會固定在瀏覽器窗口的同一位置。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在CSS中，可以使用固定定位（position:fixed;）來固定元素的位置，讓元素不隨滾動條滾動。
fixed 生成固定定位元素，元素脫離文檔流，不占據(jù)文檔流的位置，可以理解為漂浮在文檔流的上方，相對于瀏覽器窗口進行定位。
固定定位的元素以相對瀏覽器窗口為基準進行定位的，無論怎樣移動你的滑動條，它都會固定在相對于瀏覽器窗口的固定位置，另外要注意，它的兄弟元素將會在位置排布上忽視它的存在。這個時候用的top，bottom，left，right也是相對于瀏覽器窗口而言的。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> .logo { width: 540px; height: 258px; position: fixed; background: url(貓/images/1.jpg) no-repeat; margin: auto; left: 0; right: 0; top: 0; bottom: 0; } </style> </head> <body> <div class="logo"> </div> 布偶貓<br/> 布偶貓 <br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓 <br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓 <br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓 <br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓 <br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓 <br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓 <br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓 <br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓 <br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓 <br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓 <br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓 <br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓 <br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓 <br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓 <br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓 <br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/>布偶貓<br/> </body> </html>
效果圖：
從上面的示例看出：可以使用position: fixed來固定圖片位置不變，讓圖片位置可以不隨著文字的拖動而改變圖片位置。
注：
在IE7以上版本及firefox、opera、safari里，都支持css屬性"position:fixed"，它的作用就是將元素相對于窗口固定位置。
但是在IE6下，并不支持position:fixed屬性，這個時候我們需要對IE6進行hack處理。
推薦學(xué)習(xí)：css視頻教程
