css div不隨捲軸移動的實作方法

css div不隨捲軸移動的實作方法：先建立一個範例檔；然後透過給div設定css屬性樣式為「position:fixed;」即可固定div不隨捲軸移動。

本教學操作環境：Windows7系統、HTML5&&CSS3版本，Dell G3電腦，此方法適用於所有品牌電腦。

推薦：《css影片教學》

css設定div不隨捲軸移動

##把一個內容固定到某一個位置，相對與瀏覽器視窗進行定位就可以了。這裡使用的是fixed定位。

定位position 通常有absolute 絕對定位，relative 相對定位，這個都是相對於body裡面的塊元素來說的，但是如果說想要吧某一個內容就國定在某一個位置，無論滾動條滑到哪裡，他依然在瀏覽器視窗這個位置，就需要用到fixed了。

fixed 元素框的表現類似於將 position 設為 absolute，不過其包含區塊是視窗本身。同意具有 left 、 top、right、bottom 的值 他的用法和 absolute 類似。

範例：

<div style="width:100px; height:100px; border:1px solid red; position:fixed; left:300px; top:300px;">
    固定的内容
</div>

上面這個div，寬度100，高度100，距離瀏覽器左上角300像素，不隨頁面滾動而滾動。

以上是css div不隨捲軸移動的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！