如何定位html元素?

Tags: 位置, 元素,

浮動DIV,也就是定位html元素,是一個很常用到的東西,小編今天就來講一下如何使一個DIV固定在頁面某一位置,不隨屏幕滾動而離開。

工具/原料

Dreamweaver cs6或其他版本

方法/步驟

首先,這裡有一個div。裡面是一個img,我們為了讓它顯眼些,給它一個邊框。

如何定位html元素

如何定位html元素

如何定位html元素

如何讓它移動到頁面的某一位置呢?在這裡我們用到了position屬性。

position屬性用於定位元素,它有5個值,分別是absolute、fixed、relative、static、inherit,注意,任何版本的IE都不支持inherit屬性。

如何定位html元素

如何定位html元素

如何定位html元素

我們在這裡要用到的是fixed屬性,它可以把一個元素固定在頁面的某個位置

left、right、bottom、top可以指定一個元素距離邊框的位置,但是,如果沒有position:fixed;就是無效的,如圖。

如何定位html元素

如何定位html元素

加上position:fixed;的效果如圖所示。

我們把圖片變小之後再來看看。

效果非常明顯,圖片被固定在頁面的某個位置上。

這樣這張圖片就徹底被固定在了右下角,即使頁面移動也不會改變位置。

如何定位html元素

如何定位html元素

如何定位html元素

相關問題答案