css如何實現元素不隨捲軸滾動

css中可以使用position屬性設定元素不隨捲軸滾動，語法「position:fixed」。 position屬性規定元素的定位類型，當值為fixed時，元素以相對瀏覽器視窗定位，無論如何移動滑動條，都會固定在瀏覽器視窗的相同位置。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

在CSS中，可以使用固定定位（position:fixed;）來固定元素的位置，讓元素不隨捲軸滾動。

fixed 產生固定定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於瀏覽器視窗進行定位。

固定定位的元素以相對瀏覽器視窗為基準進行定位的，無論怎樣移動你的滑動條，它都會固定在相對於瀏覽器視窗的固定位置，另外要注意，它的兄弟元素將會在位置排布上忽略它的存在。這時候用的top，bottom，left，right也是相對於瀏覽器視窗而言的。

範例：

nbsp;html>

    
        <meta>
        <style>
            .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>
    

    
        <div> </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>
    

效果圖：

#從上面的範例看出：可以使用position: fixed來固定圖片位置不變，讓圖片位置可以不隨著文字的拖曳而改變圖片位置。

註：

在IE7以上版本及firefox、opera、safari裡，都支援css屬性"position:fixed"，它的作用就是將元素相對於視窗固定位置。

但在IE6下，並不支援position:fixed屬性，這個時候我們需要對IE6進行hack處理。

推薦學習：css影片教學

#

以上是css如何實現元素不隨捲軸滾動的詳細內容。更多資訊請關注PHP中文網其他相關文章！