怎么使用CSS Position屬性

這篇文章主要介紹“怎么使用CSS Position屬性”，在日常操作中，相信很多人在怎么使用CSS Position屬性問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么使用CSS Position屬性”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　CSSPosition(定位)position屬性指定了元素的定位類型。position屬性的五個值:staticrelativefixedabsolutesticky元素可以使用的頂部,底部,左側和右側屬性.

　　position屬性瀏覽器支持

　　IE Firefox Chrome Safari Opera

　　所有主流瀏覽器都支持position屬性。

　　注釋：任何的版本的InternetExplorer（包括IE8）都不支持屬性值"inherit"。

　　position屬性定義和用法

　　position屬性規定元素的定位類型。

　　說明

　　這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移。

　　默認值： static

　　繼承性： no

　　版本： CSS2

　　JavaScript語法： object.style.position="absolute"

　　可能的值

　　值 描述

　　absolute 

　　生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。

　　元素的位置通過"left","top","right"以及"bottom"屬性進行規定。

　　fixed 

　　生成絕對定位的元素，相對于瀏覽器窗口進行定位。

　　元素的位置通過"left","top","right"以及"bottom"屬性進行規定。

　　relative 

　　生成相對定位的元素，相對于其正常位置進行定位。

　　因此，"left:20"會向元素的LEFT位置添加20像素。

　　static 默認值。沒有定位，元素出現在正常的流中（忽略top,bottom,left,right或者z-index聲明）。

　　inherit 規定應該從父元素繼承position屬性的值。

　　TIY實例

　　定位：相對定位

　　本例演示如何相對于一個元素的正常位置來對其定位。

　　定位：絕對定位

　　本例演示如何使用絕對值來對元素進行定位。

　　定位：固定定位

　　本例演示如何相對于瀏覽器窗口來對元素進行定位。

　　設置元素的形狀

　　本例演示如何設置元素的形狀。此元素被剪裁到這個形狀內，并顯示出來。

　　Z-index

　　Z-index可被用于將在一個元素放置于另一元素之后。

　　Z-index

　　上面的例子中的元素已經更改了Z-index。

到此，關于“怎么使用CSS Position屬性”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！